javascript - Vue : how to pass a variable name as argument?

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;
        });
    },
  }