Question

1.i想要从vue.js组件中删除方法中的Link 请告诉我..控制台中的错误是方法拼接是未定义的。当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);
    }
  }
 };

Answer 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/

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

Vue.js删除arrray中的项目

1 个答案: