Используйте метод @click с тегом select для изменения значения вычисляемого свойства

Question

Я пытаюсь сделать следующее:

1. Введите эмоцию с помощью текстового поля и оцените интенсивность эмоции с помощью поля выбора.Синяя кнопка добавляет эмоции.
2. В разделе переоценки я бы хотел оценить интенсивность этой эмоции.

При переоценке я перебираю вычисленное свойство rerateEmotions имеет массив объектов, содержащий свойства emotion и intensity.Я хотел бы изменить интенсивность каждой эмоции в вычисляемом свойстве с помощью тега select:

Edit

Хорошо, я понял, что мне нужноизмените @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>

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>