Как создать несколько вариантов из одних данных, поступающих из API, для их отображения в виде выбора / раскрывающегося списка в VueJS

Я пытаюсь отобразить раскрывающийся список выбора с помощью vs-select, параметры взяты из API. Вот мой сценарий. Я сделал все свои компоненты динамическими, у меня есть 3 карточки на главной странице, если я щелкну любую из карточек, отобразится соответствующее содержимое.

Вот ответ, который я получаю от конечной точки /my-project:

    [
          {
            "uid": 1,
            "choice": "project_title1|project_title2|project_title3",
            "age": "35",
            "country": "india"
          },
          {
            "uid": 2,
            "choice": "project_title2",
            "age": "25",
            "country": "australia"
          } 
          ...
    ]

Вот мой код:

        <span v-if="out.choice">
            <template  v-for="(val, e) in Myfilter(out.choice)">
                <vs-select v-model="check" :key="e" :options="[{label: val}]" />
            </template>
        </span>
        <div v-if="out.choice === 'project_title1'">     
           --show contents1--
        </div>
        <div v-if="out.choice === 'project_title2'">
           --show contents2--
        </div>
    check: null,
    out: null
    // ...
    methods: {
      Myfilter (val){
      return val.replaceAll('_', ' ').split('|')
    },
      SelectVue (id) {
          this.$http.get(`/my-project/${id}`)
            .then((res) => {this.out= res.data})
        }
      },
    mounted (){
      this.SelectVue (this.$route.params.uid)
    }

Если пользователь щелкнет 2-ю карточку, он получит подробную информацию о uid=2, т.е. в vue-select он получит вариант как project title2. Если пользователь щелкнет 1-ю карточку, он получит подробную информацию о uid = 1, тогда отобразятся три vue-select, как показано на изображении:

введите описание изображения здесь

Скорее мне нужен один vue-select и три разных варианта в нем:

введите описание изображения здесь

Вот мой вопрос: как мне использовать один vue-select для данных, поступающих из API, а затем отображать для него разные параметры.


person app_er    schedule 21.01.2021    source источник
comment
вы используете vuetify?   -  person ashwin bande    schedule 21.01.2021
comment
Нет, я использую vuexy и vuesax   -  person app_er    schedule 21.01.2021
comment
что такое v-select? их vs-select в vuesax это что это? если да, то обновите свой код?   -  person ashwin bande    schedule 21.01.2021
comment
Задавать несколько вопросов в одном - это не по теме в Stack Overflow, поскольку это снижает полезность потенциальных ответов для пользователей, имеющих похожие проблемы. Каждый вопрос нужно задавать отдельно.   -  person tao    schedule 21.01.2021
comment
Спасибо за информацию, но все вопросы связаны между собой, поэтому я не буду создавать разные вопросы.   -  person app_er    schedule 21.01.2021
comment
Их единственная связь - это проблемы в одном проекте. Использование заглавных букв в каждом слове совершенно не связано с правильным повторением различных вариантов выбора. Как они связаны с проблемами программирования? Итог: я проинформировал о правилах этого сообщества. Вы можете игнорировать их. Скорее всего, если со мной согласятся больше пользователей, ваш вопрос будет закрыт как не по теме путем демократического голосования.   -  person tao    schedule 21.01.2021
comment
Хорошо, тогда я отредактирую свой вопрос   -  person app_er    schedule 21.01.2021
comment
@tao, что мне теперь делать?   -  person app_er    schedule 21.01.2021
comment
Используя v-for, как вы это делаете, вы создадите 3 выбранных элемента. Поскольку вы используете одинаковые v-model в каждом из них, они будут иметь одинаковое содержимое, и когда вы меняете одно, вы меняете их все. Если вам нужен только 1 элемент, не используйте v-for. Если вы хотите более одного, но с разными v-model, измените v-model в зависимости от текущей итерации. Из того, что я прочитал, вам нужен только 1 элемент. Объясните подробнее, что вы хотите видеть в этом элементе.   -  person tao    schedule 21.01.2021
comment
Позвольте нам продолжить это обсуждение в чате.   -  person app_er    schedule 21.01.2021


Ответы (1)


Чтобы сохранить выбор, вам необходимо сопоставить дополнительное свойство с каждой записью API. Я назвал его selection в следующем примере. Я также сделал computed извлечение пользовательского выбора из записей.

Обратите внимание, что я также назвал choice в каждом элементе choices (для меня это имеет больше смысла).

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  data: () => ({
    entries: [{
        "uid": 1,
        "choices": "project_title1|project_title2|project_title3",
        "age": "35",
        "country": "india"
      },
      {
        "uid": 2,
        "choices": "project_title2",
        "age": "25",
        "country": "australia"
      }
    ].map(el => ({...el, selection: null }))
/* Entries need to have a `selection` with a value other than `undefined` before 
 * being passed to Vue's data. Otherwise `.selection` on each won't be reactive
 */
  }),
  computed: {
    selection() {
      return Object.assign({}, ...this.entries.map(e => ({
        [e.country]: e.selection
      })));
    }
  },
  methods: {
    makeSelectOptions(choices) {
      return choices.split('|').map(value => ({
        text: value,
        value
      }))
    }
  }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuesax.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.2/iconfont/material-icons.min.css" rel="stylesheet"/>

<div id="app">
  <div v-for="(entry, index) in entries">
    <vs-select :label="entry.country"
               v-model="entry.selection">
      <vs-select-item :key="index"
                      v-bind="item"
                      v-for="(item,index) in makeSelectOptions(entry.choices)" />
    </vs-select>
  </div>
  <pre v-text="selection"></pre>
</div>

Превращение choices в параметры выбора выполняется методом makeSelectOptions.

person tao    schedule 21.01.2021
comment
@app_er, по поводу вашего недавно удаленного вопроса, я писал ответ, но теперь не могу его опубликовать. Я сделал скрипку. Надеюсь, это вам поможет. Кроме того, я вовсе не хочу вас отговаривать, но я действительно верю, что вы могли бы продвигаться намного быстрее, если бы прошли курс по базовым концепциям JavaScript, таким как массивы и итерации, вместо того, чтобы пытаться понять их самостоятельно. . Удачи! - person tao; 22.01.2021
comment
Привет @tao, да, я на самом деле беру курс и оттачиваю свои основы, и теперь я пытаюсь понять логический поток кода, именно здесь у меня действительно возникают проблемы, поэтому я пытаюсь сослаться на множество примеров и работаю над ними . Не могли бы вы помочь мне с этим stackoverflow.com/questions/65930807/ - person app_er; 28.01.2021
comment
Привет @tao, не могли бы вы помочь мне с этим stackoverflow.com/questions/65930807/ - person app_er; 29.01.2021
comment
@app_er Я не могу. Я прочитал его несколько раз и не понимаю требования. Я подозреваю, что вы хотите, чтобы динамические селекторы были связаны с параметром маршрута, но, учитывая пример и ваше объяснение, я этого не понимаю. Может, кто-нибудь еще будет. - person tao; 29.01.2021
comment
Хорошо, без проблем, ответ, который вы дали, был абсолютно прекрасен, теперь я хочу отображать параметр при загрузке, когда страница загружается, vs-select пуст, поэтому я хочу, чтобы он отображал соответствующие варианты маршрута при загрузке страницы. - person app_er; 29.01.2021
comment
В этом случае слушайте маршрут, и всякий раз, когда параметр, который вы слушаете, изменяется, вы устанавливаете v-model, используемый для выбора, на это значение. Это все, что вам нужно сделать. - person tao; 29.01.2021
comment
Но это не работает, я пробовал, он работает, если я укажу значение в v-модели, но у всех маршрутов нет этого выбора. - person app_er; 29.01.2021
comment
Конечно нет. Но вы должны остерегаться этого. Вы должны сначала проверить, содержит ли маршрут правильные параметры. - person tao; 29.01.2021