如何在 vuetify v-btn-toggle 中为每个按钮的值实现 getter/setter？

Question

我有一个像这样的 vuetify v-btn-toggle：

    <v-btn-toggle
      v-model="toggle_values"
      dense
      multiple
    >
      <v-btn value="A">
        A
      </v-btn>
      <v-btn value="B">
        B
      </v-btn>
      <v-btn value="C">
        C
      </v-btn>
    </v-btn-toggle>

但是绑定的 v-model 是一个数组。我如何触发按钮 A、B、C 的单独切换事件，如下所示：

data() {
  return { toggle_values: [] }
},
computed: {
  stateA: {
    get() {
      // get A value from other place
    },
    set(isPressed) {
      // do something on A value changed
    }
  },
  stateB: {
    get() {
    },
    set(isPressed) {
    }
  },
  stateC: {
    get() {
    },
    set(isPressed) {
    }
  },
}

Answer 1

我们必须创建一种方法来读取按钮的状态，另一种方法来设置状态，所有操作都发生在 toggle_values。

data() {
  return { toggle_values: [] }
},
methods: {
  getToggleStateIsPressed: function (value) {
    return this.toggle_values.indexOf(value) === -1 ? false : true;
  },
  setToggleState: function (value, press) {
    if (press && this.toggle_values.indexOf(value) === -1) {
      this.toggle_values.push(value);
    } else if (!press) {
      this.toggle_values = this.toggle_values.filter((val) => {
        return val != value;
      });
    }
  },
},
computed: {
  stateA: {
    get() {
      return this.getToggleStateIsPressed("A");
    },
    set(isPressed) {
      this.setToggleState("A", isPressed);
    },
  },
  stateB: {
    get() {
      return this.getToggleStateIsPressed("B");
    },
    set(isPressed) {
      this.setToggleState("B", isPressed);
    },
  },
  stateC: {
    get() {
      return this.getToggleStateIsPressed("C");
    },
    set(isPressed) {
      this.setToggleState("C", isPressed);
    },
  },
},

如果您想尝试这些值并查看它们的变化，请添加：

Model: {{ toggle_values }} <br />
A is pressed {{ getToggleStateIsPressed("A") }}<br />
B is pressed {{ getToggleStateIsPressed("B") }}<br />
C is pressed {{ getToggleStateIsPressed("C") }}<br />
<v-btn @click="stateA = !stateA">{{ getToggleStateIsPressed("A")?'unpress':'press' }} A</v-btn>
<v-btn @click="stateB = !stateB">{{ getToggleStateIsPressed("B")?'unpress':'press' }} B</v-btn>
<v-btn @click="stateC = !stateC">{{ getToggleStateIsPressed("C")?'unpress':'press' }} C</v-btn>

希望对您有所帮助！ ;)

如何在 vuetify v-btn-toggle 中为每个按钮的值实现 getter/setter？

How to impliment getter/setter for each button's value inside vuetify v-btn-toggle?

javascript

vuetify.js