Vuetify 将参数从选择选项传递到方法参数

Question

我是 vuejs 的新手。我在将参数从选定选项传递给我的 javascript 方法时遇到问题。 在我的 updateClientIsMaster 方法中，我总是得到未定义的项目，但我将 v-on:change="updateClientIsMaster 放入 <-select> 未定义的问题消失了

updateClientIsMaster: function(item) {
            console.log('*************************'+item);
            var master = 0;
            axios.put("/diag_migration/rest/correspondanceMultiEtablissements/updateClientIsMaster?idClient="+item+"&isMaster="+master)
            .then(response => {
                this.listClients()
            })
        },

                                    <v-select 
                                    :items="fournisseursByClient"
                                      simple                                                              
                                      name="client"                                                           
                                      item-text="idClient"
                                      label="Choisir l'entité juridique"
                                      :menu-props="{ maxWidth: '1000' }"                                                                                      
                                      >                                     
                                      <template slot='selection' slot-scope='{ item }'>
                                     Vous avez choisi le client : {{ item.client }} ayant un ID : {{ item.idClient }} comme entité juridique
                                      </template>
                                                                         
                                      <template slot='item' slot-scope='{ item }'>                                    
                                       <b>ID</b> : {{ item.idClient }} ||<b>RS</b> : {{ item.client }}|| <b>SIRET</b> : {{ item.siret }} || <b>Adr</b> : {{ item.adresse }} 
                                      </template>
                                      
                                            </v-select> 
                                           </v-card>                                    
                                           <v-btn
                                            color="primary"
                                            @click="updateClientIsMaster();e1=2;">
                                            Continue
                                          </v-btn>
                                          <v-btn text
                                          @click="closeRelationTable">
                                            Annuler
                                          </v-btn>
                                         

Answer 1

Vue.js 遵循 MVVM 架构，因此使用 v-model 和观察者来实现您想要做的事情通常更优雅。

<script>
    export default {
        methods: {
            updateClientIsMaster: function (item) {
                console.log('*************************' + item);
                var master = 0;
                axios.put("/diag_migration/rest/correspondanceMultiEtablissements/updateClientIsMaster?idClient=" + item + "&isMaster=" + master)
                    .then(response => {
                        this.listClients()
                    })
            }
        },
        data() {
            return {
                selection: undefined
            };
        },
        watch: {
            selection(value) {
                updateClientIsMaster(value);
            }
        }
    }
</script>


<v-select
    v-model="selection"
    :items="fournisseursByClient"
    simple
    name="client"
    item-text="idClient"
    label="Choisir l'entité juridique"
    :menu-props="{ maxWidth: '1000' }"
>
    <template slot='selection' slot-scope='{ item }'>
        Vous avez choisi le client : {{ item.client }} ayant un ID : {{ item.idClient }} comme entité juridique
    </template>

    <template slot='item' slot-scope='{ item }'>
        <b>ID</b> : {{ item.idClient }} ||<b>RS</b> : {{ item.client }}|| <b>SIRET</b> : {{ item.siret }} || <b>Adr</b>
        : {{ item.adresse }}
    </template>

</v-select>
</v-card>
<v-btn
    color="primary"
    @click="updateClientIsMaster();e1=2;">
    Continue
</v-btn>
<v-btn text
       @click="closeRelationTable">
    Annuler
</v-btn>