Question

我有以下最低限度的例子：

<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，即在呈现期间未更新节点的data-id。这里有什么问题以及如何改进这个问题？

Answer 1

您正在将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/

只是关于分隔符的说明，如果你在其他模板引擎中使用双胡子，例如laravel blade，Vue也接受@{{data}}作为分隔符。

Vue.js - 模型和渲染内容之间的不一致

1 个答案: