Javascript Vue V型起爆损失选择

我在初始化某些类型的html元素上的Vue时遇到问题，请查看以下代码：

新Vue{ el:“应用程序”， 数据：{ 测试： } } 没有Vue： 1. 2. 3. 使用Vue： 1. 2. 3. 为了利用vue的反应系统，vue需要完全控制。因此，没有办法解决这个问题，您必须以某种方式将这些默认值告知vue

如果您是以html为中心的，那么这将有点尴尬：您必须选择dom元素以找到其默认值并将其设置回vue。这是可行的，但它将是单一的

vue中的正确方法是完全数据驱动，并基于数据构建HTML。例如，如果您的表单有两个选择框，那么按照vue的方式，您应该为所有选项定义数据，并使用这些数据从头开始生成这些元素。请注意，我在这里使用的是单文件组件格式：

从“/components/Select.vue”导入选择； 导出默认值{ 资料{ 返回{ 清单1：[ {id:1，name:spoon}， {id:2，name:fork，preselect:true}， {id:3，姓名：刀} ], 清单2：[ {id:4，name:macbook}， {id:5，name:dell}， {id:6，name:lenovo，preselect:true} ] }; }, 组件：{Select} }; 下面是组件的代码请注意，这是一个自定义的Vue组件，因为它以大写字母s开头。此组件将接收道具项目，并根据给定的项目自动计算选定的值：

{{item.name} 导出默认值{ 道具：[道具]， 资料{ 返回{ //从“项目”中预选项目 已选择：this.items.filteritem=>item.preselect[0]。id }; } };

---

完成后，项目叉和项目联想将根据数据进行预选。您还可以看到一个关于这方面的工作示例。

@b0nyb0y的答案在技术上是正确的，但由于它不能解决我的具体问题，我想我会在这里包括我的黑客解决方法，以供将来参考。仅适用于选择：

var itemsToRestore = [];
$('select[v-model]').each(function (index, value) {
    itemsToRestore.push({
        vModelProperty: $(value).attr("v-model"),
        selectedValue: $(value).val()
    });
});

var thisVue = new Vue({
    //Put your vue code here
});

itemsToRestore.forEach(function (value) {
    thisVue[value.vModelProperty] = value.selectedValue;
});

---

为什么不给data property=test分配一个与test:2这样的选项相同的默认值呢？是的，我做了一些类似var XXX=$'XXX'.val。。。vueObject.data=XXX但基本上是一样的，是的，您的方法可能比我使用的更黑客的解决方法更好。我知道有一些方法可以避免这种行为，我只是想要一些简单一点的。对于有许多下拉列表的大用户表单来说，这变得相当乏味……是的，如果我不想在遗留的webforms应用程序上实现，那就太好了，现在我的挑战是将vue放在一堆asp:DropDownList上，也许我需要重做所有这些…@DavidRogers我感觉到了你的痛苦。当您决定有一天使用完整的惯用Vue时，如果您也使用selenium或Puppeter进行了web scraping/e2e测试，那么您完全可以创建一个脚本来查找所有or元素并从中构造数据。对于大型遗留应用程序中的大型表单，手工构建JSON太难了。