Question

我在使用scotch.io的VueJS指南创建的功能方面遇到了问题。它应该在点击时从列表中删除一个函数（触发视图更新），但我一直收到此控制台错误：

[Vue警告]：财产或方法＆＃34; $ index＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。（在根实例中找到）

指南并没有说在数据选项中声明任何内容，我缺少什么？

这是HTML：

var id = {id: 5}; // Just in case you need a correct format

$.getJSON("faqs.php", id, function(data){
    var faqs = data.faqs;
    $.each(faqs, function(faqId, faq){
        $('<div/>')
            .attr('id', 'faq'+faqId)
            .addClass("list-group-item")
            .appendTo($("#topic-container"));

        for(iCnt = 0; iCnt < faq.length; iCnt++){
            var q = $('<div/>')
                .attr('id', 'q-'+faqId+'-'+iCnt)
                .text(faq[iCnt].question)
                .appendTo('#faq'+faqId); // div for each question

            var a = $('<div/>')
                .attr('id', 'a-'+faqId+'-'+iCnt)
                .text(faq[iCnt].answer)
                .appendTo('#faq'+faqId); // div for each answer
        }
    });
});

相关的JS：

    <a href="#" class="list-group-item" v-for="event in events">
      <h4 class="list-group-item-heading">
        <i class="glyphicon glyphicon-bullhorn"></i>
        {{event.name}}
      </h4>
      <h5>
        <i class="glyphicon glyphicon-calendar" v-if="event.date"></i>
        {{event.date}}
      </h5>
      <p class="list-group-item-next" v-if="event.description">{{event.description}}</p>
      <button class="btn btn-xs btn-danger" v-on:click="deleteEvent($index)">Delete Event</button>
    </a>

已经有几个案例，我不得不换掉指南使用的弃用指令，（v-repeat，v-on =＆＃34;点击＆＃34;等等）问题类似吗？

Answer 1

您所关注的指南略显过时。

在Vue 2.0中，使用索引需要对语法进行一些更改：

<a href="#" class="list-group-item" v-for="(event, index) in events">
  <!-- You have to ask for it:             ^^^^^^^^^^^^^^ -->
  <button class="btn btn-xs btn-danger" v-on:click="deleteEvent(index)">
  <!-- Then use it the way you named it:                        ^^^^^ -->
    Delete Event
  </button>
</a>

无法从动态生成的列表中删除项目

1 个答案: