Пуш в массив данных по выбору поля из тега select?

Question

[Gregory]

Добрый день. В голове никак не складывается как правильно это написать:

есть селект

<select class="form-control" v-model="choosenMetabolit" placeholder="тип события" >
         <option
            v-for="metabolit in metabolits"
            :key="metabolit"
            :value="metabolit">
            {{metabolit.name}}
         </option>
</select>

и вот его массив данных:

data(){
			return {
				metabolits: [{
						name: 'L-аланин',
						result_1: 72,
						result_2: -32,
						result_3: -33,
					},{
						name: 'L-аргинин',
						result_1: 96,
						result_2: 68,
						result_3: 72,
					},{
						name: 'L-аспарагиновая кислота',
						result_1: 17.89,
						result_2: 93.6,
						result_3: 81.3,
					},{
						name: 'L-глутаминовая кислота',
						result_1: 87.4,
						result_2: 54.8,
						result_3: 49.2,
					},{
						name: 'L-глицин',
						result_1: -17,
						result_2: -44,
						result_3: -38,
				}],
				choosenMetabolit: {},

Соответственно в choosenMetabolit попадает выбранный объект в селект. И вот после выбора нужно, чтобы данные объекта пушались в следующий объект:

anMetProfData: {
					labels: ["L-аланин"],
					datasets: [
						{
							label: "Результат 1",
							backgroundColor: ["#3e95cd"],
							data: [10]
						},
						{
							label: "Результат 2",
							backgroundColor: ["#8e5ea2"],
							data: [-35]
						},
						{
							label: "Результат 3",
							backgroundColor: ["#3cba9f"],
							data: [4]
						},

			    	]
			    },

Name должна падать в массив labels, а result_1, 2 и 3 имели путь datasets[0, 1 или 2]. data

И когда например я выберу селекте другое значение то объект anMetProfData дополнялся.

Answer 1

[0xD34F]

Name должна падать в массив labels

Сделайте watcher для choosenMetabolit, что-то вроде

watch: {
  choosenMetabolit(val) {
    this.anMetProfData.labels.push(val.name);
  },
},

а result_1, 2 и 3 имели путь datasets[0, 1 или 2]. data

А вот эту фразу я не уверен что понял. "Имели путь" - в смысле значения result'ов записывались в соответствующие массивы data объектов, лежащих в datasets? Тогда можно дополнить watcher как-то так:

watch: {
  choosenMetabolit(val) {
    const data = this.anMetProfData;
    const sets = data.datasets;

    data.labels.push(val.name);
    sets[0].data.push(val.result_1);
    sets[1].data.push(val.result_2);
    sets[2].data.push(val.result_3);
  },
},

Comments

[Gregory]

0xD34F, да все верно. Спасибо. Я тоже уже реализовал только несколько иначе, но близко к вашему решению:

<select v-on:change="pushDataToChart" class="form-control" v-model="choosenMetabolit" placeholder="тип события" >
         <option
                  v-for="metabolit in metabolits"
                  :key="metabolit"
                  :value="metabolit">
                  {{metabolit.name}}
        </option>
</select>

На селект событие change повесил, а в метод прописал пути для пуша:

methods: {
			pushDataToChart(){
				this.anMetProfData.labels.push(this.choosenMetabolit.name)
				this.anMetProfData.datasets[0].data.push(this.choosenMetabolit.result_1)
				this.anMetProfData.datasets[1].data.push(this.choosenMetabolit.result_2)
				this.anMetProfData.datasets[2].data.push(this.choosenMetabolit.result_3)
			}
		}

[Gregory]

0xD34F, а не могли бы Вы подсказать как можно переписать функцию в watch исходя из того, что я переделал условие следующим образом:

Добавил чекбоксы в селект и теперь если чекбокс нажат то данные добавляются в массив, если галочка с чекбокса убрана то эти данные удаляются. Т.е. нужно если данные есть в массиве choosenMetabolit то они по описанным путям выше пушаться в массив anMetProfData, если эти данные убираются из choosenMetabolit то они также удаляются из anMetProfData...

<form>
	<div class="multiselect">
		 <div class="selectBox" @click="showCheckboxes">
		     <select class="form-control">
			    <option>Выберите тип метаболтита</option>
		     </select>
		     <div class="overSelect"></div>
		</div>
		<div id="checkboxes">
			<el-checkbox-group v-model="choosenMetabolit">
			   <el-checkbox v-for="metabolit in metabolits" :label="metabolit">{{metabolit.name}}</el-checkbox>
			</el-checkbox-group>
		</div>
	 </div>
</form>

Исходя из этого при выборе нескольких чекбоксов формируется такой массив choosenMetabolit:

choosenMetabolit: [{
						name: 'L-аланин',
						result_1: 72,
						result_2: -32,
						result_3: -33,
					},{
						name: 'L-аргинин',
						result_1: 96,
						result_2: 68,
						result_3: 72,
					},{
						name: 'L-аспарагиновая кислота',
						result_1: 17.89,
						result_2: 93.6,
						result_3: 81.3,
					},{
						name: 'L-глутаминовая кислота',
						result_1: 87.4,
						result_2: 54.8,
						result_3: 49.2,
					},{
						name: 'L-глицин',
						result_1: -17,
						result_2: -44,
						result_3: -38,
				}]

[0xD34F]

Можно сделать anMetProfData вычисляемым свойством, как-то так:

computed: {
  anMetProfData() {
    const choosen = this.choosenMetabolit;

    return {
      labels: choosen.map(n => n.name),
      datasets: [ {
        label: 'Результат 1',
        backgroundColor: ["#3e95cd"],
        data: choosen.map(n => n.result_1)
      }, /*
        ну а здесь остальные объекты...
        кстати, подумайте над тем, как сопоставить элементы массива результатов со свойствами result_1/2/3 из metabolits, чтобы по три раза одно и то же не писать
      */ ]
    };
  },
},

[Gregory]

0xD34F, данные добавляются правильно. Но почему-то chart.js не хочет рендерить эти данные. Не знаете с чем это может быть связано?
проверял, если anMetProfData находится в data и есть данные то все норм, а в computed, данные есть изначально то рендерит, а если новые добавляются то нет..

[0xD34F]

В чём там конкретно проблема - без понятия. Если сделаете демку на jsfiddle, могу попробовать разобраться.

Наверняка у chart.js есть какой-то метод, позволяющий осуществлять принудительную перерисовку - посмотрите в документации.

Или, если как вы говорите, всё хорошо, когда anMetProfData находится в data - тогда попробуйте повесить watcher на choosenMetabolit и пересобирать в нём anMetProfData:

watch: {
  choosenMetabolit(val) {
    this.anMetProfData = {
      labels: val.map(n => n.name),
      datasets: [ {
        label: 'Результат 1',
        backgroundColor: ["#3e95cd"],
        data: val.map(n => n.result_1)
      }, ...

Answer 2

[lavezzi1]

В computed заведите массив в который будут фильтроваться/попадать данные из массива селекта.