Как вывести текст выбранной опции?

Question

[Виталий Першин]

Начал знакомиться с vuejs и не могу понять, как правильно вывести текст опции, а не value.

Answer 1

[0xD34F]

data: () => ({
  options: [
    { value:  69, text:  'hello, world!!' },
    { value: 187, text:  'fuck the world' },
    { value: 666, text: 'fuck everything' },
  ],
  value: null,
}),
computed: {
  selectedText() {
    return (this.options.find(n => n.value === this.value) || {}).text || '';
  },
},

<select v-model="value">
  <option v-for="n in options" :value="n.value">{{ n.text }}</option>
</select>
<div>
  Текст выбранной опции: <span>{{ selectedText }}</span> 
</div>

Comments

[Виталий Першин]

У вас список опций и значений сформирован непосредственно в самом приложении, а как это будет выглядеть в рамках моего примера где опции прописаны внутри селекта?

[0xD34F]

Во vue принято плясать от данных, а не от разметки. Так что имейте в виду, что в контексте высказанного ранее ("начал знакомиться с vuejs"), ваш вопрос можно перефразировать следующим образом:

"Я очень-очень-очень хочу стать говнокодером, пжжжалста помогите!!!!!"

Помогаю:

data: () => ({
  value: null,
  selectedText: '',
}),
mounted() {
  this.$watch('value', {
    immediate: true,
    handler(v) {
      const option = [...this.$refs.select.options].find(n => n.value === v);
      this.selectedText = (option || {}).innerText || '';
    },
  });
},

<select v-model="value" ref="select">
  <option value="69">hello, world!!</option>
  <option value="187">fuck the world</option>
  <option value="666">fuck everything</option>
</select>
<div>
  Текст выбранной опции: <span>{{ selectedText }}</span> 
</div>

И ещё раз:

data: () => ({
  selectedText: '',
}),
methods: {
  onChange(e) {
    this.selectedText = e.target.querySelector('option:checked').innerText;
  },
},
mounted() {
  this.$refs.select.dispatchEvent(new Event('change'));
},

<select @change="onChange" ref="select">
  <option value="69">hello, world!!</option>
  <option value="187">fuck the world</option>
  <option value="666">fuck everything</option>
</select>
<div>
  Текст выбранной опции: <span>{{ selectedText }}</span> 
</div>

[Виталий Першин]

0xD34F, Я не знаю кем вы хотите стать, я хочу решить конкретную задачу, как бы вы её не назвали. Пример который вы мне предложили я естественно изучил так как его везде можно найти. А такое решение я не нашел и знаний у меня не хватает поэтому мне интересны способы, не вижу в этом ничего плохого не понимаю чего у вас так забамбило.

Спасибо за актуальный пример, буду изучать.

[0xD34F]

Виталий,

Я не знаю кем вы хотите стать...

Вы не поняли - речь идёт о вас. Изучая новую технологию на кривых примерах, велик риск, что вы получите искажённое представление о способах её применения. Из-за чего в дальнейшем будут ПРОБЛЕМЫ. Моё дело предупредить.

[Виталий Першин]

0xD34F, Я то понял, это вы не понимаете, что ваши утверждения о том кто кем хочет стать, как минимум неуместны.

[0xD34F]

Виталий, всё-таки не поняли. Речь шла не о том, кто кем хочет стать, а о том, что вы совершаете ошибку, желая осваивать новую для себя технологию с оглядкой на весьма уродливые примеры её использования.

[Виталий Першин]

0xD34F,

вы совершаете ошибку, желая осваивать новую для себя технологию с оглядкой на весьма уродливые примеры её использования.

Вот видите? Вам не кажется что это более вежлива и информативная фраза чем вот эта:

Во vue принято плясать от данных, а не от разметки. Так что имейте в виду, что в контексте высказанного ранее ("начал знакомиться с vuejs"), ваш вопрос можно перефразировать следующим образом:

"Я очень-очень-очень хочу стать говнокодером, пжжжалста помогите!!!!!"

[Виталий Першин]

0xD34F, Опять же с чего вы решили что я собираюсь делать так или иначе? Я прошерстил документацию, реализовал некоторые примеры, меня заинтересовал такой вопрос я его задал, вам захотелось меня перефразиловать почему-то, я ведь тоже могу вас перефразировать

[0xD34F]

Виталий,

Вам не кажется что это более вежлива и информативная фраза

Вежливая - да. Но у нас тут не институт благородных девиц, так что как-нибудь потерпите. Более информативная - нет, как раз наоборот.

с чего вы решили что я собираюсь делать так или иначе?

Да ничего я не решил, расслабьтесь.

я ведь тоже могу вас перефразировать

Флаг в руки.

[Виталий Першин]

0xD34F,

Вы не поняли - речь идёт о вас.

всё-таки не поняли.

Тогда не понтяно что вы пытаетесь доказать в ответ на сарказм ведь у нас тут:

не институт благородных девиц