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

Posted 2023-02-23

【中文标题】如何在 vue-status-indicator 中动态更改道具？

【英文标题】：How to change prop dynamically in vue-status-indicator?

【发布时间】：2019-10-25 23:31:50

【问题描述】：

我是 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> 

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

【问题讨论】：

关于vuejs.org/v2/guide/syntax.html#Dynamic-Arguments，尝试：

【参考方案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>

【讨论】：

非常感谢。而且据我所知，如果不编写包装器，就不可能更改道具？

完全理解 - 感谢@Matt 的解释和示例