使用选择的插件和API在Vue JS中选择选项不会更新

如何解决使用选择的插件和API在Vue JS中选择选项不会更新

我是VueJS的新手，一直在尝试从网上的文档和资源中学习东西。

我一直试图使VueJS与JS中的Chosen Plugin一起运行。因此，我的代码启动了一个vue应用程序，还启动了一个带有所选插件的Select选项。选择元素中的选项使用v-for呈现，如下所示。

<select class="chosen-select">
    <option selected>Choose user...</option>
    <option v-for="(item,index) in users.data" :value="item.key">{{item.user}}</option>
</select>
<script>
    $(".chosen-select").chosen({width:"100%"});
</script>

我进行API调用以从数据库中获取数据并更新user.data：

$.get("demo_test.PHP",function(res,status){
    ...
    var newUserData = res.users;
    app.users.data.push(newUserData );   // here app is the Vue app
    ...
  });

我可以看到app.user.data中的数据已更新，但是所选内容不会在列表中显示新用户。

我该怎么办？任何帮助深表感谢！

解决方法

由于JS中的反应性限制，Vue无法检测到对数组所做的更改。

您可以使用Vue.set(array,index,item)将数组中特定索引的值设置为新值，或者将users.data数组的引用更改为新数组，如下所示：

$.get("demo_test.php",function(res,status){
    ...
    var newUserData = res.users;
    app.users.data = [...app.users.data,newUserData];
    ...
  });

上面的代码应该触发更改，因为app.users.data现在指向一个新数组，该数组是现有数组的副本，并添加了新项。