If you require two different intensity ratings, simply have two properties on each object - for example, intensity and newIntensity. Initially set both to the same value when an entry is created, but the second property can be left empty if desired.
The computed property rerateEmotions seems unnecessary, so I have eliminated it in favor of directly using emotionIntensity. If the intention was to create a copy, using a computed property will not achieve that effect; it will just be the same array.
For the re-rate dropdown, I have utilized v-model, although an event listener could also be used if preferred. The important aspect is that the newIntensity property is being used for the second value.
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>