在现有数据上创建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里里。如果删除数据-server呈现=“true”，它将显示我的3 li。

Answer 1

我的问题是因为\n

我的html必须是这样的

<ul id="app-5" data-server-rendered="true"><li>Learn JavaScript test1</li><li>Learn Vue test2</li><li>Build something awesome test3</li></ul>

我的js：

var app5 = new Vue({
 el: '#app-5',
 template: '<ul id="app-5"><li v-for="todo in todos">{{ todo.title }} {{   todo.text }}</li></ul>',
 data: {
  todos: [
   { title: 'Learn JavaScript', text:"test1" },
   { title: 'Learn Vue', text:"test2" },
   { title: 'Build something awesome', text:"test3" },
  ]
 }
})

我想，如果我使用一个模板来进行这两种渲染，那么它应该是没有问题的。这就是我要做的。

Answer 2

我认为问题在于您试图让Vue覆盖包含data-server-rendered的标记。你想把你的水化进去。如果我设置了el: '#app-4' (与您一样)，则会得到一个错误：

客户端呈现的虚拟DOM树与服务器呈现的内容不匹配.

如果我在id="app-5"中设置了ul，并在Vue规范中使用了el: '#app-5'，我就不会得到这个错误，而且一切都会显示为ok。

​

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>

​

Answer 3

在js页面上，可以使用组件声明模板。

Vue.component('todo',{
    template:`<ul><slot></slot></ul>`,
});

在html页面上

<todo>
<li v-for="todo in todos">{{todo.title}}</li> 
</todo>