Vue：如何将变量名作为参数传递？

Question

我正在尝试创建一种方法来加载下载的JSON文件并将内容分配给动态变量。我认为这应该可行，但是varA和varB仍然为空：

  data() {
    return {
      varA: Array,
      varB: Array
    }
  },

  mounted(){
    this.loadJSON("example.com/fileA.json", this.varA);
    this.loadJSON("example.com/fileB.json", this.varB);
  },

  methods: {
    loadJSON(uri, target) {
      fetch(uri)
        .then(res => res.json())
        .then((out) => {
          target = out;
        })
        .catch(err => {
          throw err;
        });
    },
  }

我也尝试将varA和varB定义为计算属性，但是结果相同。不用在loadJSON()中对变量名进行硬编码，该怎么办？

Answer 1

您可以改用Vue.set：

  mounted(){
    this.loadJSON("varA");
    this.loadJSON("varB");
  },

  methods: {
    loadJSON(uri, targetName) {
      const self = this;
      fetch(uri)
        .then(res => res.json())
        .then((out) => {
          Vue.set(self, targetName, out);
        })
        .catch(err => {
          throw err;
        });
    },
  }