如何在 vue-status-indicator 中动态更改道具？

Question

我是 VueJS 的新手，在阅读了 this doc section 和这个 question 之后，我不知道如何动态更改以下组件的 prop active|positive|intermediary|negative 和 pulse （它可能是另一个)：vue-status-indicator

例如：user.status = positive 和以下错误代码：

<span v-for="user in users" :key="user.id">
  <status-indicator {{ user.status }}></status-indicator>
</span> 

设置这些类型的道具的正确语法是什么？

Answer 1

你可以做这样的事情..我必须为它写一个包装器才能使它起作用..

[CodePen Mirror]

编辑要明确 - 您不能在属性内进行插值。这与 Vue 中的 boolean 属性有关..

这个：

<status-indicator active pulse />

...与执行此操作完全相同：

<status-indicator :active="true" :pulse="true" />

我写的“包装器”组件允许你提供一个字符串来设置状态（就像你想做的那样）：

<v-indicator status="active" pulse></v-indicator>
<!-- OR -->
<v-indicator status="positive" pulse></v-indicator>
<!-- OR -->
<v-indicator status="intermediary" pulse></v-indicator>
<!-- OR -->
<v-indicator status="negative" pulse></v-indicator>

这是完整的“包装器”组件，采用.vue 格式：（为“状态”属性添加了一个验证器）

<template>
  <status-indicator 
    :active="indicatorStatus.active" 
    :positive="indicatorStatus.positive"
    :intermediary="indicatorStatus.intermediary"
    :negative="indicatorStatus.negative"
    :pulse="pulse"
  ></status-indicator>
</template>

<script>
export default {
props: {
    status: {
      type: String,
      required: true,
      validator: (prop) => [
        'active',
        'positive',
        'intermediary',
        'negative',
      ].includes(prop)      
    },    
    pulse: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return { 
      indicatorStatus: {
        active: false,
        positive: false,
        intermediary: false,
        negative: false,
      }
    }
  },
  watch: {
    status() {
      this.handleStatusChange(this.status);
    }
  },
  methods: {
    handleStatusChange(newStatus) {
      Object.keys(this.indicatorStatus).forEach(v => this.indicatorStatus[v] = false);
      this.indicatorStatus[newStatus] = true;
    }
  },
  mounted() {
    this.handleStatusChange(this.status);    
  }    
}
</script>

片段：

const vIndicator = {
  template: "#v-indicator",
  props: {
    status: {
      type: String,
      required: true,
      validator: (prop) => [
        'active',
        'positive',
        'intermediary',
        'negative',
      ].includes(prop)      
    },    
    pulse: {
      type: Boolean,
      required: false,
    },
  },
  data() {
    return { 
      indicatorStatus: {
        active: false,
        positive: false,
        intermediary: false,
        negative: false,
      }
    }
  },
  watch: {
    status() {
      this.handleStatusChange(this.status);
    }
  },
  methods: {
    handleStatusChange(newStatus) {
      Object.keys(this.indicatorStatus).forEach(v => this.indicatorStatus[v] = false);
      this.indicatorStatus[newStatus] = true;
    }
  },
  mounted() {
    this.handleStatusChange(this.status);    
  }
}

new Vue({
	el: '#app',
  components: {
    vIndicator
  },
  data: {
    currentStatus: '',
    isPulse: '',
  }, 
  computed: {
    currentJson() {
      let cj = {
        currentStatus: this.currentStatus,
        isPulse: this.isPulse,
      };
      return JSON.stringify(cj, null, 2);
    }
  },
  mounted() {
    let statuses = ["active", "positive", "intermediary","negative"];
    let c = 0;
    let t = 0;
    this.currentStatus = statuses[c];
    this.isPulse = true;
    setInterval(() => {  
      t = c + 1 > 3 ? t + 1 : t;
      c = c + 1 > 3 ? 0 : c + 1;
      this.currentStatus = statuses[c];
      this.isPulse = (t % 2 == 0) ? true : false;
    }, 2000)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/vue-status-indicator@latest/dist/vue-status-indicator.min.js"></script>
<link href="https://unpkg.com/vue-status-indicator@latest/styles.css" rel="stylesheet"/>

<div id="app">
  <p>Will alternate status as well as pulsing (pulse changes after each full loop)</p>
  <!-- 
    [status]active|positive|intermediary|negative 
    [pulse]true|false
  -->
  <v-indicator :status="currentStatus" :pulse="isPulse"></v-indicator>
  <pre>{{ currentJson }}</pre>
</div>

<!-- WRAPPER COMPONENT -->
<script type="text/x-template" id="v-indicator">
  <status-indicator 
    :active="indicatorStatus.active" 
    :positive="indicatorStatus.positive"
    :intermediary="indicatorStatus.intermediary"
    :negative="indicatorStatus.negative"
    :pulse="pulse"
  ></status-indicator>
</script>