Vue обновлять реквизиты для выбранных опций

Question

Я использую vue cli, и у меня есть выбор для отображения раскрывающегося списка измерений. Мне интересно, как я могу обновить реквизиты, когда я выбираю измерение?

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

Итак, когда я нажимаю на объем, текст диаграммы меняется на объем и отображает данные объема для этого пользователя.

Я попытался сделать это для текста диаграмма через прослушиватель событий @change, но реквизиты не передаются и не изменяют текст:

Select: <select name="show" class="show" v-model="value" @change="newText($event)">
                    <option :value="{ text: 'Volume'}">Vol</option>
                    <option :value="{ text: 'Weight'}">Weight</option>
                    <option :value="{ text: 'Temperature'}">Temp</option>
        </select> 

<script>
newText: function(event) {
        const text = this.value.text;
        this.text = text;
        },
<script>

Вот пример codeandbox .

Любая помощь будет будь отличным, спасибо!

Answer 1

Вам нужно найти объект пользователя и отобразить значение этого пользователя. Здесь я нахожу пользователя, которого щелкнули, используя вычисленное свойство внутри вкладки, и визуализирую значение этого пользователя. codeandbox .

Вычислено внутри Tabs.vue:

computed: {
    selectedUser() {
      if (this.name) {
        let name = this.name;
        return this.users.find(e => e.name == name);
      } else return {}
    }
  }