Question

在vue.js应用程序中，我试图使用axios从java / postgresql后端填充内容。我知道vue不会跟踪对数组的更改，除非您使用$ set关键字。当我使用$ set关键字时，遇到以下错误消息：

ManageTools.vue？45c2：109未捕获（承诺）TypeError：> _this2.userToolsIds。$ set不是函数评估时（ManageTools.vue？45c2：109）

我已尝试在我的函数开始时设置vm = this，如此处所述... TypeError: this.$set is not a function 这没有帮助。

我必须更改什么？干杯，基甸

<template>
<div class="card">
  <div class="card-header">
      <h3 class="card-title">
        Tools                    
      </h3>
  </div>
  <div class="card-body">
      <div class="row row-eq-height">
          <div class="col">
            <FormDropdown
            :field-content="selectedTool"
            field-label="Tools"
            field-name="tool"
            :field-choices="tools"
            field-description="Select a tool and click 'install' to install."
            @updateValue="updateValue"                                                                   
            ></FormDropdown>
            <div class="row mt-2 mb-2">
              <div class="col">        
               <button class="btn btn-primary" @click.prevent="installTool">Install Tool</button>
              </div>
            </div>            
          </div>
          {{finishedFetchingToolIds}} {{finishedFetchingToolsInfo}}
          <div class="col col-md-6" v-if="finishedFetchingToolsInfo">
            Installed Tools
            {{userTools}}
            <ul>
              <li v-for="tool in userTools" :key="tool">
                toolname
                {{tool.toolname}}
              </li>
            </ul>
          </div>
      </div>
  </div>
  <div v-if="showTool">
    <foo>
    </foo>
  </div>
</div>
</template>

<style>
</style>

<script>
import axios from 'axios';
import store from "../store.js";
import FormDropdown from "@/components/FormDropdown";
export default {
  name: "ManageTools",
  components: {  
    foo: () => import('../test-plugin.js'),
    FormDropdown
  },

  data() {
    return {
      showTool: false,
      tools: ['mass-emailer', 'auto-text-messenger'],
      selectedTool: 'mass-emailer',
      userToolsIds: [],
      userTools: [],
      user_id: 2,
      finishedFetchingToolIds: false,
      finishedFetchingToolsInfo: false
    }

  },

  methods: {
    installTool() {
      this.showTool = true;
      console.log("showing tool");
    },
    updateValue() {
      console.log("updating value");
    }
  },
  watch: {
    finishedFetchingToolIds() {
      console.log("in watch for finishedFetchingToolIds")
      for (var i = 0; i < this.userToolsIds.length; i++) {
        axios.get("/tools/"+this.userToolsIds[i]).then(
          response => {
            console.log("tool info: "+response.data.toolname);
            this.userTools.$set(i, response.data);
            console.log("userTools[i]: "+this.userTools[i]);
            console.log("finishedFetchingToolsInfo: "+this.finishedFetchingToolsInfo);
          },
          error => {
            store.setAxiosErrorMessage("Failed to display tool info", error);
          }
        );
      }
      this.finishedFetchingToolsInfo = true;
    }
  },
  mounted() {
    console.log("mounted");
    axios.get("/tools/installed_tools").then(
      response => {
        console.log("response.data[0] "+response.data[0].tool_id);
        for (var i = 0; i< response.data.length; i++) {
          console.log("iter = "+ i);
          console.log("tool id: "+response.data[i].tool_id);
          this.userToolsIds.$set(i, response.data[i].tool_id);
        }
        console.log("userToolsIds length: "+this.userToolsIds.length);  
        this.finishedFetchingToolIds = true;
      },
      error => {
        store.setAxiosErrorMessage("Failed to display user tools info", error);
      }
    );
  }
};
</script>

可以在这里使用数组吗？还是对象更合适？

Answer 1

this.userToolsIds.$set(i, response.data[i].tool_id);

...应该是：

this.$set(this.userToolsIds, i, response.data[i].tool_id);

...，其中用this.userToolsIds[i]填充response.data[i].tool_id。

ViewModel具有$set方法，而不是您的数据。

请参见documentation。

Answer 2

我的后续问题的解决方案是将async / await关键字添加到for循环内的axios调用中。

   X1 X2 X3 X4 X5 X6 X7 X8 X9 X10
1   5  2  6  5  0  6  2  5  2   5
2   1  4  6  1  3  4  3  2  2   3
3   2  3  2  0  3  3  5  0  1   6
4   2  5  3  3  1  3  3  5  3   0
5   5  2  3  0  1  5  1  2  1   0

}

$ set无法更新vue.js中的数组

2 个答案: