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 - 模型和呈現的內容之間的不一致

回答

相關問題