javascript - 在现有数据上创建 Vue.js 对象

Question

我的服务器生成了以下代码:

<div id="app-4" data-server-rendered="true">
  <ul>
    <li>Article 1 test1</li>
    <li>Article 2 test2</li>
  </ul>
</div>

现在使用 Vue.js，如果数据发生变化，我想再次生成此代码。这可能吗？

我尝试做某事，但没有成功:

var app4 = new Vue({
  el: '#app-4',
  props: ["todo"],
  template: '  <ul>\n' +
  '    <li v-for="todo in todos">\n' +
  '      {{ todo.title }} {{ todo.text }}' +
  '    </li>\n' +
  '  </ul>',
  data: {
    todos: [
      { title: 'Article 3', text:"test1" },
      { title: 'Article 4', text:"test2" },
      { title: 'Article 5', text:"test3" }
    ]
  }
})

理论上，当我输入的 data.todos 值与服务器生成的输出中的值不同时，它应该发生变化。但它留在我的2里。如果我删除 data-server-rendered="true"，它将显示我的 3 li。

Answer 1

我认为问题在于您试图让 Vue 覆盖包含 data-server-rendered 的标签。你想把你的水分放在里面。如果我设置 el: '#app-4' (像你一样)，我会收到错误:

The client-side rendered virtual DOM tree is not matching server-rendered content.

如果我在 ul 中设置 id="app-5" 并在我的 Vue 中使用 el: '#app-5'规范，我没有收到该错误，并且一切都正常。

var app4 = new Vue({
  el: '#app-5',
  template: '  <ul>\n' +
  '    <li v-for="todo in todos">\n' +
  '      {{ todo.title }} {{ todo.text }}' +
  '    </li>\n' +
  '  </ul>',
  data: {
    todos: [
      { title: 'Article 3', text:"test1" },
      { title: 'Article 4', text:"test2" },
      { title: 'Article 5', text:"test3" }
    ]
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app-4" data-server-rendered="true">
  <ul id="app-5">
    <li>Article 1 test1</li>
    <li>Article 2 test2</li>
  </ul>
</div>