Question

我尝试使用Vue并使用从POST方法获得的信息来更改DOM。我有一个名为treeview的组件：

<div id="treeview" class="col-sm-3" style="overflow-y: auto">
  <ul>
    <li v-for="file in files" v-on:click="openFile(file)">
      <i v-bind:class="file.filetype"></i> {{file.name}}
    </li>
  </ul>
</div>

有两个功能可以填补它：

function ReadRede(){
  $.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: "/ReadRede",
    success: function(datarec) {
      console.log(datarec);
      var filedropdown = new Vue({
        el: '#treeview',
        data: {
          files: JSON.parse(datarec)
        }
      })
      filedropdown.files = JSON.parse(datarec);
    }
  });
}

function ReadLocal(){
  var pathAtt = {
    path: localStorage.local
  }
  $.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: "/ReadLocal",
    data: JSON.stringify(pathAtt),
    success: function(datarec) {
      console.log(datarec);
      var filedropdown = new Vue({
        el: '#treeview',
        data: {
          files: JSON.parse(datarec)
        }
      })
      filedropdown.files = JSON.parse(datarec);
    }
  });
}

更改DOM的正确方法是什么？

Answer 1

在外面宣布：

var filedropdown = new Vue({
  el: '#treeview',
  data: {
    files: JSON.parse('[]')
  }
})

并在此处更新：

function ReadRede(){
  $.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: "/ReadRede",
    success: function(datarec) {
      console.log(datarec);
      filedropdown.files = JSON.parse(datarec);
    }
  });
}

function ReadLocal(){
  var pathAtt = {
    path: localStorage.local
  }
  $.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: "/ReadLocal",
    data: JSON.stringify(pathAtt),
    success: function(datarec) {
      console.log(datarec);
      filedropdown.files = JSON.parse(datarec);
    }
  });
}

它正在发挥作用，但它是否正确？

Vue不呈现新数据

1 个答案: