如何通过 vuejs 将动态 v-model 及其初始值添加到现有的 html 元素中

Question

出于SEO的目的，我需要通过PHP渲染HTML元素。例如，我有这些元素。

<?php foreach ($elements as $key => $element): ?>
    <select name="first" v-model="model[<?= $key; ?>]">
        <option value="">Select</option>
        <option value="1">Some Text</option>
        <option value="2">Some Text</option>
    </select>
    <select name="second" v-model="model[<?= $key; ?>]>
        <option value="">Select</option>
        <option value="4">Some Text</option>
        <option value="5">Some Text</option>
    </select>
    ...
    ...
    ...
    <select name="eleven" v-model="model[<?= $key; ?>]>
        <option value="">Select</option>
        <option value="101">Some Text</option>
        <option value="102">Some Text</option>
    </select>
<?php endforeach; ?>

可能我可以在Vue侧操纵这些元素。

const count_models = <?= count($elements) ?>; // in the html
const app = new Vue({
  el: '#app',
  data: {
    model:[]
  },
  mounted(){
    console.log(this.model);
    for (let $i = 0; $i < count_models; $i++) {
        this.model[$i] = "";
    }
  }
})

我无法声明模型的初始值[？]。我需要XHR或将计数项目分配到JavaScript变量，以获取我对DOM有多少元素，并将每个模型的初始值声明为null []。即使我重新列出了模型的初始值，也不会绑定。我只是在JSFIDDLE上添加了一个示例。在Angular1中，有NG-INIT属性可以声明该模型的初始值。

我该如何解决这个问题？

https://jsfiddle.net/ks7jmgwv/1/

Answer 1

您刚刚遇到了vuejs最常见的陷阱之一：反应性(因此缺乏(！

！

此处的问题是创建模型属性时，它只是一个空数组/对象，而您添加到该元素的任何属性都不会反应：这意味着任何类型的更改都不会触发Vue的。内部Whatches，V-Model仍然有效的唯一原因是用户而不是代码所做的更改实际上确实触发了本机HTML事件。

您有两个可能的解决方案：

• 忽略重新的部分(但是您将无法编程地更新选定的值，或者至少看不到它(，只需确保将默认选择"选择"选项通过分配正确的值(这样，您就可以跳过所有默认的前面初始化(。

  <option :value="undefined" selected="selected" disabled>Select</option>

• 遵循Vuejs文档建议的官方方法，以将新属性添加到对象中，并且仍然具有反应性的优势

  this.$set(this.model, $i, "");

您可以检查这个我向您展示获得目标的方式：https://jsfiddle.net/8y7eu39z/18/

另外，您是否知道，对于选择中的占位符选项，您可以添加属性？

exectivy参考：https：//v2.vuejs.org/v2/guide/reactivity.html

---

另外：如果您想要" null"作为默认值，但没有设法找到一种使其被" select"识别的方法选项只需使用:value="null"而不是value="null"，然后您应该能够使用 this.$set(this.model, $i, null);