时间戳

首页 > 解决方案 > VueJS 没有响应数组长度的变化？

javascript - VueJS 没有响应数组长度的变化？

问题描述

使用单文件模板，我希望有一个按钮，如果数组为空，则显示“单击此处”，如果已填充则显示值。ajax 工作正常，对象正在更新，但按钮不会重新呈现。我在这里做错了什么？

<template>
  <span>
    <button
      v-if="value.app_token.length"
      class="btn btn-outline-primary btn-sm"
      disabled
    >Mobile App Token: {{ value.app_token[0].token }}</button>
    <button v-else class="btn btn-primary btn-sm" @click="getToken">Click to get Mobile App Token</button>
  </span>
</template>

<script>
module.exports = {
  props: ["value"],

  methods: {
    getToken() {
      axios
        .get("/patients/getToken/" + this.value.id)
        .then(response =>
          this.value.app_token.splice(
            0,
            this.value.app_token.length,
            response.data
          )
        )
        .catch(error => console.log(error));
    }
  }
};
</script>

标签： javascriptvue.jsvuejs2

解决方案

该getToken方法使道具发生变异value，这是不允许的（您可能在控制台中遇到错误）。

解决方案

为令牌创建一个计算值，并创建一个变量来保存获取的数据：

data() {
  return {
    fetched: null
  }
},
computed: {
  token() {
    let token = JSON.parse(JSON.stringify(this.value.app_token));
    if (this.fetched) {
      // Now this mutates a copy, not the original
      token.splice(0, token.length, this.fetched);
    }
    return token;  
  }
}

如果没有获取任何内容，则令牌值将与道具中的相同。否则，它将重新计算到修改后的令牌。更改您的getToken方法，使其目的是将数据结果存储在fetched：

methods: {
  getToken() {
    axios
      .get("/patients/getToken/" + this.value.id)
      .then(response => this.fetched = response.data)
      .catch(error => console.log(error));
  }
}

现在使用你的计算v-if：

v-if="token.length"

并显示如下：

{{ token[0].token }}

这是给你的演示

此外，如果 token prop 只是 token 字符串本身而不是复杂对象的一部分，然后也将 axiosid作为单独的 prop 传递，那么这将不会令人困惑。

推荐阅读