Vue.js 删除数组中的项目答案

【问题标题】：Vue.js remove item in arrrayVue.js 删除数组中的项目
【发布时间】：2017-11-08 09:51:53
【问题描述】：

1.我想从 vue.js 组件中删除方法中的链接请掌舵我..控制台中的错误是方法拼接未定义。当 insert.message 中的消息没有问题时，链接将添加。插入链接不是问题。但无法删除。在我的单个页面中推送数组。但如果对用户不利，则可以删除

     <div class="list-group">
                          <div class="col-lg-4" style="margin-
   top:3px">
                            <input type="text" v-model="link.title" 
            class="form-control" placeholder="titolo" id="title">
                          </div>
                          <div class="col-lg-7">
                            <input type="text" v-model="link.hyperlink" 
            class="form-control" placeholder="link" id="link">
                          </div>
                          <div class="col-lg-1">
                            <button @click="addLink" type="button" 
                  id="add-link-btn" class="btn btn btn-primary pull-
                     right">+</button>

                          </div>
                        </div>
                        </div>
                        <div v-for="link in message.links" 
                       :key="link.id">
                       <div class="row">
                            <div class="col-lg-6">
                              <p>{{link.title}}</p>

                            </div>
                            <div class="col-lg-6">
                              <a>{{link.hyperlink}}</a>
                               <button class="btn btn-xs btn-danger" 
                           @click="removeLink(link)">Delete</button>
                            </div>
                          </div>
               <scrip>

   data() {
    return {
      title: "Aggiungi",
      link: {
        id: 1,
        autore: "Amedeo",
        title: "",
        hyperlink: ""
      },
}
}
methods: {
    addMessage() {
      var id = this.messages.length
        ? this.messages[this.messages.length - 1].id
        : 0;
      var message = Object.assign({}, this.message);
      message.id = id + 1;
      message.date = new Date();
      this.messages.push(message);

      this.message.title = "";
      this.message.subtitle = "";
      this.message.body = "";
    },
    // metodo addlink che inserisci un nuovo link ovvimente lavorando 
    sul id del messaggio padre
    addLink() {
      var messageId = this.messages.length
        ? this.messages[this.messages.length - 1].id
        : 1;
      var id = this.message.links.length
        ? this.message.links[this.message.links.length - 1].id
        : parseInt(messageId + "0", 10);
      var link = Object.assign({}, this.link);
      link.id = id + 1;
      link.date = new Date();
      this.message.links.push(link);

      this.link.title = "";
      this.link.hyperlink = "";
    },
    removeLink(link) {
      this.links.splice(this.links.indexOf(link), 1);
    }
  }
 };

【问题讨论】：

您的代码不完整，请格式化并显示您的data(){}对象
现在可以了吗？现在完成了吗？
在你的data(){} 中你有link 对象，但你试图拼接links 那是你的错误
请写一个代码..一个例子？
将所有 this.links 更改为 this.link 因为在您的 data(){} 内部您没有 links 对象，您只有 link

标签： javascript arrays vue.js

【解决方案1】：

您需要预先定义您将在数据中访问的每个属性。

由于现代 JavaScript 的局限性（以及放弃 Object.observe)，Vue 无法检测到属性添加或删除。

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

在您的代码中，messages 和 links 在开始时未在您的数据对象中定义，因此反应性将不起作用。

例如，下面的代码不起作用：

<div id="app">
  Message: {{message}}<br />
  <input type="text" v-on:input="update($event.target.value)" />
</div>
<script>
    new Vue({
    el: '#app',
  data: {

  },
  methods: {
    update: function(value) {
        this.message = value;
    }
  }
});
</script>

https://jsfiddle.net/m4q44g7f/

但此代码有效，因为消息是在开始时定义的。

<div id="app">
  Message: {{message}}<br />
  <input type="text" v-on:input="update($event.target.value)" />
</div>
<script>
    new Vue({
    el: '#app',
  data: {
    message: ''
  },
  methods: {
    update: function(value) {
        this.message = value;
    }
  }
});
</script>

https://jsfiddle.net/m4q44g7f/1/

注意：您的代码中可能还有其他错误，但您首先需要修复此错误。

【讨论】：