Как связать модель товара и ее цвета?

Question

[Ohurmevshiy]

Только начал изучать Vue.js. Подключил Vuetify.
Имеется массив объектов с параметрами товаров:

btnModelInfo: [
      {id: '1', name: 'model_1' , colors: ['white', 'blue', 'red']},
      {id: '2', name: 'model_2' , colors: ['red', 'green', 'blue']},
    ],
allColors: {
    white: '#ffffff',
    blue: "#0000ff ",
    red: #'ff0000',
    green: '#00ff00',
}

Нужно, чтобы по нажатию на кнопку с моделью, так же появлялись кнопки с цветами из массива colors в <v-btn-toggle>Потом, при нажатии на этот цвет, в карточке товара менялось изображение. Пока не впитал как это организовать.

<v-card>
          <v-card-title>Выберите модель</v-card-title>
            <v-btn-toggle class="mb-10">
              <v-btn color="#546E7A" :key="btn.id" v-for="btn in btnModelInfo">{{btn.name}}</v-btn>
            </v-btn-toggle>
<!-- Здесь должно менять изображение в зависимости от выбранного цвета-->          
            <v-btn-toggle>
              <v-btn :color="color" :key="i" v-for="(color, i) in allColors"></v-btn>  
            </v-btn-toggle>     
</v-card>

Поясните так же, пожалуйста, что значит mandatory проп во vuetify? Я не понял что он делает

Comments

[Алексей Ярков]

Поясните так же, пожалуйста, что значит mandatory проп во vuetify? Я не понял что он делает

Английским по белому же написано

[Леонид Роженцев]

У меня вопрос: на каком языке написан второй кусок кода? (просто интересно,так кк новичок в веб-разработке).

[Ohurmevshiy]

Алексей Ярков, Я в компоненте кнопок смотрел, так что до слайдов не добрался. А в кнопках ничего не понял

Answer 1

[Aetae]

<v-card>
  <v-card-title>Выберите модель</v-card-title>
  <v-btn-toggle class="mb-10" v-model="currentButton">
    <v-btn color="#546E7A" :key="btn.id" v-for="btn in btnModelInfo">{{btn.name}}</v-btn>
  </v-btn-toggle>
  <!-- Здесь должно менять изображение в зависимости от выбранного цвета-->          
  <v-btn-toggle>
    <v-btn :color="color" :key="name" v-for="[name, color] in currentColors" @click="changeColor(name)"></v-btn>  
  </v-btn-toggle>     
</v-card>

{
  data() {
    return {
      btnModelInfo: [
        {id: '1', name: 'model_1' , colors: ['white', 'blue', 'red']},
        {id: '2', name: 'model_2' , colors: ['red', 'green', 'blue']},
      ],
      allColors: {
        white: '#ffffff',
        blue: "#0000ff ",
        red: '#ff0000',
        green: '#00ff00',
      },
      currentButton: null
    }
  },
  computed: {
    currentColors() {
      return this.currentButton === null ? [] : this.btnModelInfo[this.currentButton]
        .colors
        .map(name => [name, this.allColors[name]]);
    }
  },
  methods: {
    changeColor(color) {
      //Здесь должно менять изображение в зависимости от выбранного цвета
    }
  }
}

Answer 2

[0xD34F]

data: () => ({
  activeItem: null,
  items: [
    {
      id: 69,
      name: 'hello, world!!',
      colors: [ 'white', 'blue', 'red' ],
      color: null,
    },
    {
      id: 187,
      name: 'fuck the world',
      colors: [ 'red', 'green', 'blue' ],
      color: null,
    },
    {
      id: 666,
      name: 'fuck everything',
      colors: [ '#fb1', '#e2c', '#3a9', '#cb9' ],
      color: null,
    },
  ],
}),

<v-btn-toggle class="mb-10" v-model="activeItem">
  <v-btn color="#546E7A" v-for="n in items" :key="n.id" :value="n">
    {{ n.name }}
    <v-badge v-if="n.color" :color="n.color" bordered inline tile></v-badge>
  </v-btn>
</v-btn-toggle>
<v-spacer></v-spacer>
<v-btn-toggle v-if="activeItem" v-model="activeItem.color">
  <v-btn v-for="n in activeItem.colors" :key="n" :color="n" :value="n"></v-btn>
</v-btn-toggle>

https://jsfiddle.net/ud1o4y9L/

Comments

[Ohurmevshiy]

id 187 что означает?

Answer 3

[Владимир Коротенко]

сделайте вычисляемое свойство которое возвращает путь к картинке в зависимости от цвета