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

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

<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 li在一起。如果删除data-server-rendered =“ true”，它将显示我的3 li。

最佳答案

我认为问题在于您正在尝试让Vue覆盖包含data-server-rendered的标签。您想在其中补充水分。如果设置el: '#app-4'（如您所做的那样），则会出现错误：


  客户端渲染的虚拟DOM树不匹配
  服务器呈现的内容。


如果在id="app-5"中设置ul并在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>