Nano Hash - криптовалюты, майнинг, программирование

Установить значение по умолчанию в меню выбора опций

Я хочу привязать настраиваемый атрибут к меню выбора параметров. Тег <option> будет просто иметь атрибут selected="selected"

<template>
  <div>
    <select>
      <option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option>
    </select>
  </div>
</template>

data: {
  selected: "selected",
  notSelected: ""
}

Это не работает, но если я изменю v-bind:selected на v-bind:class, тогда он получит соответствующий класс, поэтому логика работает, но не с атрибутом selected.

Есть ли способ заставить его работать с такими настраиваемыми атрибутами?


Ответы:


1

Вы можете просто использовать v-model для выбора значения по умолчанию в поле выбора:

Разметка:

<div id="app">
  <select v-model="selected">
     <option value="foo">foo</option>
     <option value="bar">Bar</option>
     <option value="baz">Baz</option>
  </select>
</div>

Просмотреть модель:

new Vue({
  el: "#app",
  data: {
    selected: 'bar'
  }
});

Вот JSFiddle: https://jsfiddle.net/Lxfxyqmf/

13.12.2016
  • Как это можно использовать в data(){} function? Ничего из того, что я пробовал, не сработало, и я просмотрел несколько потоков здесь, на SO, используя несколько разных способов и документы VueJs2. Выберите "Базовое использование" 07.08.2018
  • @ Chris22 Должно быть просто data: function () { return { selected: 'bar' } } 09.08.2018
  • Как бы вы этого добились, если бы хотели выбрать только первый индекс. Т.е. вы не знаете возвращаемых результатов, поэтому просто выберите первый результат автоматически. 22.06.2019

  • 2

    html:

    <div id="myComponent">
        <select v-model="selectedValue">
            <option v-for="listValue in valuesList" :value="listValue">
                {{listValue}}
            </option>
        </select>
        <span>Chosen item: {{ selectedValue }}</span>
    </div>
    

    js:

    var app = new Vue({
        el: '#myComponent',
        data: {
            selectedValue: 'Two',
            valuesList: ['One', 'Two', 'Three']
        },
    
    27.05.2019
  • Этот ответ можно считать правильным, если вы просто хотите, чтобы значение было выбрано по умолчанию, и не хотите использовать v-model. 11.10.2019
  • @GustavoStraube Даже если вы используете v-модель, я не вижу, чтобы она выбирала вариант по умолчанию. Использование этого вместе с v-моделью работает при выборе значения по умолчанию 24.06.2021

  • 3

    Если вы используете композицию api

    <template>
    <div class="select">
            <select v-model="selectedValue">
                <option value="abc">
                    abc
                </option>
                <option value="cba">
                    cba
                </option>
                
            </select>
        </div>
    </template>
    
    <script>
    import { ref } from 'vue';
    
    export default {
        setup() {
            const analyticsDays = ref('cba');
    
            return { analyticsDays };
        },
    };
    </script>
    
    08.02.2021

    4

    Я создал многоразовый компонент select, который также передает значение modelValue родительскому компоненту.

    Если вы посмотрите на первый тег option, вы увидите, как я создаю значение по умолчанию с помощью props.

    BaseSelect.vue (дочерний компонент)

    <template>
      <label v-if="label">{{ label }}</label>
      <select
        class="field"
        :value="modelValue"
        v-bind="{
          ...$attrs,
          onChange: ($event) => {
            $emit('update:modelValue', $event.target.value);
          },
        }"
      >
        <option value="" disabled>{{ defaultValue }}</option>
        <option
          v-for="option in options"
          :key="option"
          :value="option"
          :selected="option === modelValue"
        >
          {{ option }}
        </option>
      </select>
    </template>
    
    <script>
    export default {
      props: {
        label: {
          type: String,
          default: ""
        },
        defaultValue: {
          type: String,
          default: "Select an item of the list",
          required: false
        },
        modelValue: {
          type: [String, Number],
          default: "Otros"
        },
        options: {
          type: Array,
          required: true
        },
      },
    };
    </script>
    

    Родительский компонент

    <BaseSelect
          label="Asunto"
          defaultValue = "Selecciona un asunto" 
          v-model="contactValues.asunto"
          :options="asuntos"
        />
    

    Обратите внимание, что вы должны правильно получить это значение в своих данных () (v-модель)

    07.07.2021
    Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

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

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..