javascript - 使用带有 select 标记的 @click 方法来更改计算属性的值

Question

我想做的是：

1. 使用文本框输入情绪，并使用选择框评估情绪的强度。蓝色按钮增加情感。
2. 在重新评估部分，我想重新评估那种情绪的强度。

在 rerate 中，我正在循环一个计算属性rerateEmotions，该属性具有一个包含emotion和intensity属性的对象数组。我想做的是使用 select 标签更改计算属性上每种情绪的强度：

编辑

好的，我发现我需要在 rerate 上更改@click为@change<select>

现在我只想弄清楚如何从“评价情绪”和“重新评价情绪”区域中进行单独的评价。

const app = new Vue({
  el: "#app",
  data: function() {
    return {
      emotion: "",
      intensity: null,
      newIntensity: null,
      emotionIntensity: []
    };
  },
  computed: {
    rerateEmotions() {
      return this.emotionIntensity;
    }
  },
  methods: {
    rerateIntensity(id) {
      return (this.rerateEmotions[id].intensity = this.newIntensity);
    },
    openEmotion(id) {
      this.emotionId = id;
    },
    addEmotionIntensity() {
      var emotionIntensity = {
        emotion: this.emotion,
        intensity: this.intensity
      };
      this.emotionIntensity.push(emotionIntensity);
      this.emotion = "";
      this.intensity = null;
    },
    removeEmotion(id) {
      if (id > -1) {
        this.emotionIntensity.splice(id, 1);
      }
    },
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <div class="row mb-3 pr-4">
    <div class="col-6">
      <h1>Rate</h1>
      <input v-model="emotion" type="text" placeholder="Enter emotion here." class="form-control" id="basic-url" aria-describedby="basic-addon3">
    </div>
    <div class="col-5 select-outline">
      <select class="mdb-select md-form md-outline colorful-select dropdown-primary" v-model="intensity">
        <option value="" disabled selected>Rate Emotion</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </div>
    <button @click="addEmotionIntensity()" type="button" class="col-1 btn btn-primary">+</button>
  </div>

  <ul>
    <li v-for="(emotion, index) in emotionIntensity">
      <b>{{emotion.emotion}} : {{emotion.intensity}}</b>
      <button type="button" @click="removeEmotion(index)">
        X
      </button>
    </li>
  </ul>

  <hr>

  <div class="form-group">
    <label for="exampleFormControlTextarea1"><h5>Rerate</h5></label>

    <li v-for="(emotion, index) in rerateEmotions">
      <b>{{emotion.emotion}} : {{emotion.intensity}}</b>
      <select class="mdb-select md-form md-outline colorful-select dropdown-primary" @change="rerateIntensity(index)">
        <option value="" disabled selected>Rate Emotion</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </li>
    <hr>
  </div>
</div>

标签： javascriptvue.jsvuejs2

Answer 1

如果您需要两个强度等级，那么您可以在每个对象上只有两个属性。例如intensity和newIntensity。在下面的示例中，我在首次创建条目时将两者初始化为相同的值，但如果愿意，第二个属性可以留空。

计算的属性rerateEmotions似乎没有做任何事情，所以我删除了它以支持emotionIntensity直接使用。也许目的是创建一个副本，但使用计算属性不会产生这种效果，它只是同一个数组。

对于我使用的重新评分下拉菜单v-model，尽管如果您愿意，没有理由不能使用事件侦听器。关键是我将该newIntensity属性用于第二个值。

const app = new Vue({
  el: "#app",
  data: function() {
    return {
      emotion: "",
      intensity: null,
      newIntensity: null,
      emotionIntensity: []
    };
  },
  methods: {
    openEmotion(id) {
      this.emotionId = id;
    },
    addEmotionIntensity() {
      var emotionIntensity = {
        emotion: this.emotion,
        intensity: this.intensity,
        newIntensity: this.intensity
      };
      this.emotionIntensity.push(emotionIntensity);
      this.emotion = "";
      this.intensity = null;
    },
    removeEmotion(id) {
      if (id > -1) {
        this.emotionIntensity.splice(id, 1);
      }
    },
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <div class="row mb-3 pr-4">
    <div class="col-6">
      <h1>Rate</h1>
      <input v-model="emotion" type="text" placeholder="Enter emotion here." class="form-control" id="basic-url" aria-describedby="basic-addon3">
    </div>
    <div class="col-5 select-outline">
      <select class="mdb-select md-form md-outline colorful-select dropdown-primary" v-model="intensity">
        <option value="" disabled selected>Rate Emotion</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </div>
    <button @click="addEmotionIntensity()" type="button" class="col-1 btn btn-primary">+</button>
  </div>

  <ul>
    <li v-for="(emotion, index) in emotionIntensity">
      <b>{{emotion.emotion}} : {{emotion.intensity}}</b>
      <button type="button" @click="removeEmotion(index)">
        X
      </button>
    </li>
  </ul>

  <hr>

  <div class="form-group">
    <label for="exampleFormControlTextarea1"><h5>Rerate</h5></label>

    <li v-for="(emotion, index) in emotionIntensity">
      <b>{{emotion.emotion}} : {{emotion.newIntensity}}</b>
      <select v-model="emotion.newIntensity" class="mdb-select md-form md-outline colorful-select dropdown-primary">
        <option value="" disabled selected>Rate Emotion</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </li>
    <hr>
  </div>
</div>