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] = "";
    }
  }
})

我无法声明model [？]的初始值。我需要一个xhr或将计数的项目分配给javascript变量，以获取DOM上有多少个select元素，并将每个模型的初始值声明为null []。即使我重新声明了模型的初始值，它也不会绑定。我只是在jsFiddle上举了一个例子。在Angular1中，有ng-init属性来声明模型的初始值。

我该如何解决这个问题？

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

Answer 1

您刚刚遇到了Vuejs的最常见陷阱之一：反应性（因此缺乏机会）！

这里的问题是，当创建模型属性时，它只是一个空数组/对象，并且您添加到该元素的任何属性都不会是被动的：这意味着以编程方式进行的任何类型的更改都不会触发Vue的内部问题，v模型仍然有效的唯一原因是用户而不是代码所做的更改实际上会触发本地HTML事件。

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

忽略重新激活部分（但是您将无法以编程方式更新所选值，或者至少它将不可见），只需确保默认情况下会选中“选择”选项通过为其分配正确的值（这样，您就可以跳过所有默认的for循环初始化）。

<option :value="undefined" selected="selected" disabled>Select</option>
按照Vuejs文档建议的正式方法向对象添加新属性，并且仍然具有反应性优势

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

您可以检查这个矮人，在其中我向您展示了实现目标的两种方法： https://jsfiddle.net/8y7eu39z/18/

您还知道，对于选择中的占位符选项，您可以添加禁用的属性吗？

重新激活参考：https://vuejs.org/v2/guide/reactivity.html

此外：如果您想将“ null”作为默认值，但又没有设法找到一种方法使其由“ select”选项识别，则只需使用:value="null"而不是value="null"并那么你应该可以使用 this.$set(this.model, $i, null);

如何通过vuejs动态添加v模型及其初始值到已存在的html元素

1 个答案: