Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
278 views
in Technique[技术] by (71.8m points)

javascript - Associate 2 separate fields into one object using v-model VueJS and Vuetify

I have a checkbox and a field that i want to associate to a value inside of object. The user has the option to select one of the values provided or they can enter their own value. The can also pick 1 car or 2 or 3.. What i want to get done is that when the user choice a car(checkbox) and enters a value, both use push to a value using the v-model. Not sure how to get this done.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  data() {
    return {
    
    
cars: [
    {
        id: 1,
        title: "Honda",
        value:'',

    },
    {
        id: 2,
        title: "Toyota",
        value:'',

    },
    {
        id: 3,
        title: "Audit",
        value:'',

    },
],
   
  
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
        
        
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
        
<div id="app">

<template>

<div>

   <v-row>
        <v-col
            v-for="(car,index) in cars"
            class="d-flex ma-0 pa-0 pl-2 pr-1 pb-3"
            cols="12"
            md="4"
            sm="4"
            :key="index"
        >
          <v-checkbox
              :label="car.title"
              color="primary"
              hide-details
              dense
          ></v-checkbox>

          <v-combobox
              :items="[1000,2000,3000,4000]"
              label="car value"
              outlined
              dense
          ></v-combobox>

        </v-col>
      </v-row>

</div>

</template>

 
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...