Question

在我的代码中，我在服务器端动态创建了许多元素，将这些元素的html存储在javascript对象中，将其删除并动态/有条件地将它们添加到页面的不同部分。

对于一个特定的元素，我想要一个数据绑定，以便可以在v-if指令中引用该绑定。但是，如果我在服务器端添加v-bind，则在复制html后它会丢失。

由于我仅在javascript代码中添加了元素，因此无法在模板中注册v-bind。我也不可以在组件中提供内容，因为它不是静态的，而是依赖于服务器的输入。

如何注册绑定？

示例代码：

动态生成的表单元素（服务器端）：

<div id="archive" style="display: none;">
   <div><input type="text" name="purpose" v-bind:value="purpose" id="id_purpose"></div> <!-- v-bind has no effect -->
   <div><input type="text" name="purpose__iexact" id="id_purpose__iexact"></div>
   <div><input type="text" name="purpose__contains" id="id_purpose__contains"></div>
   <div><input type="text" name="purpose__icontains" id="id_purpose__icontains"></div>
   <div><input type="text" name="purpose__in" id="id_purpose__in"></div>
   ...
</div>

复制html的代码：

    var input = {};
    var archive = document.getElementById('archive');
    for(var i = 0; i < archive.children.length; i++) {
        var div = archive.children[i];
        input[div.firstChild.name] = div.innerHTML
    }
    archive.parentNode.removeChild(archive);

用于动态显示某个输入字段（客户端）的模板代码：

<div class="inline" v-html="input[SOME CONDITIONAL COMPUTATIONS]"></div>

Answer 1

渲染vue场景的正确方法是：

    <template>
  <div>
    <input type="button" value="Add new item" @click="addItem">
    <hr>
    <div v-for="(item,index) in data" :key="index">
      <span v-html="item.html"></span>
      <h3>Model data {{item.model}}</h3>
      <input type="text" v-model="item.model">
      <input type="button" value="Click me" @click="item.action(index)">
      <input v-if="item.show" type="button" value="Remove me" @click="removeItem(index)">
      </br>
    </div>
  </div>
</template>

<script>

export default {

  data() {
    return {
      item: {
        model: "",
        show:true,
        html: "<b>mydata html</b>",
        action: function(index) {
          console.log(`Clicked ${index} element.`);
        }
      },
      data: [
        {
          model: "",
          show:false,
          html: "<b>mydata html</b>",
          action: function(index) {
            alert(`Clicked ${index} element.`);
            console.log(`Clicked ${index} element.`);
          }
        },
        {
          model: "",
          show:true,
          html: "<b>mydata html</b>",
          action: function(index) {
             alert(`Clicked ${index} element.`);
            console.log(`Clicked ${index} element.`);
          }
        }
      ]
    };
  },
  methods: {
    addItem() {
      let item = Object.assign({}, this.item); // other way dublicating Observer
      this.data.push(item);
    },
    removeItem(index){
      this.data.splice(index,1)
    }
  }
};
</script>

您可以将show boolean道具添加到item对象，将v-if =“”属性添加到div以将其隐藏。我希望这个例子对您有帮助。

如何将Vue数据绑定添加到动态创建的元素

1 个答案: