Vue.js - 模型和呈现的内容之间的不一致

我有以下最低例子：Vue.js - 模型和呈现的内容之间的不一致

<html> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 

    </head> 
    <body> 
    <div id="app"> 
    <ol> 
     <li v-for="series in currentSeries" v-bind:data-id="series.id"> 
     The ID is <% series.id %> 
     <a href="javascript:;" class="removeSeries">X</a> 
     </li> 
     </ol> 
    </div> 
    </body> 

    <script> 
    vm = new Vue({ 
    el: '#app', 
    delimiters: ["<%", "%>"], 
    data: { 
     currentSeries: [{id: "1"}, {id: "2"}, {id: "3"}] 
    }, 

    methods: { 
     removeSeries: function(id) { 
     this.currentSeries = this.currentSeries.filter(function(element) { 
      return element.id != id; 
     }); 
     } 
    } 
    }); 

    $(function() { 
     $(document).on("click", ".removeSeries", function() { 
     var id = $(this).parent().data("id"); 
     console.log(id); 
     vm.removeSeries(id); 
     }); 
    }); 
    </script> 
</html>

我有一系列的变量currentSeries列表。我创建了这些列表，并为每个项目添加一个-tag以将其从列表中删除。

如果我点击第一个'X'，第一个元素将从列表中移除，ID 1将显示在控制台中。然后，如果再次点击第一个元素，它应该删除第二个元素（现在是第一个元素）。 HOwever，输出id仍然是1，即数据id在渲染期间没有更新节点。这里有什么问题，以及如何改进？

来源

2016-11-08 Maximilian Matthé

你在混合jQuery与Vue，两者在概念上是不同的。这里jQuery是完全不必要的，因为你可以使用内置的单击事件VUES：

// This will call remove series on click and remove the element by the given id 
<a href="#" @click="removeSeries(series.id)">X</a>

现在，这将调用您的removeSeries对于给定的id，你可以更新，但是你想底层模型数据。

这里的的jsfiddle：

https://jsfiddle.net/vyra5nzc/

只是一个分隔符上的音符，Vue公司也接受@{{data}}作为分隔符，如果你使用的是双小胡子一些其他的模板引擎如laravels刀片。

来源

2016-11-08 11:29:13

感谢您的解决方法！我知道，我混合jQuery和Vue可能不是最佳。但是，有没有明显的原因，为什么它不像我在原来的文章中那样工作？这很好理解，这样同样的错误不会再次发生（一旦可能需要联合使用这两种技术）。 –

很难，为什么这不起作用，有趣的是它的工作原理是你只是使用'id'，然后用'attr'得到它，但在'jQuery'中使用'data'时发生了一些事情，所以我猜这个问题是与jQuery如何实现该功能有关。这是'attr'和'id'的小提琴：https：//jsfiddle.net/5dpy5gfL/ –

Vue.js - 模型和呈现的内容之间的不一致

回答

相关问题