How to link a product model and its colors?

Question

Vue.js

Just started learning Vue.js. Connected Vuetify.
There is an array of objects with product parameters:

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',
}

It is necessary that by clicking on the button with the model, buttons with colors from the colors array also appear. <v-btn-toggle>Then, when you click on this color, the image changes in the product card. Haven't figured out how to organize it yet.

<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>

Could you please also explain what the mandatory prop means in vuetify? I didn't understand what he was doing

Answer 1

<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

make a computed property that returns the path to the image depending on the color