javascript - 使用 VueJS 更改几张卡片的类

Question

我有这个页面有几张卡片，每张卡片都有自己的状态单选按钮：好的，丢失，错误。

我想改变每张卡的状态而不改变其他卡。所以我创建了一种方法来更改@change 事件的类，但是由于所有卡片都绑定相同的“数据”，例如“状态”，因此更改一个，更改所有。

让我们看一些代码

<input class="form-check-input" type="radio" name="dadosCadastrais" id="inlineRadio1" value="option1" @change="ok">
<input class="form-check-input" type="radio" name="dadosCadastrais" id="inlineRadio2" value="option2" @change="falta">
<input class="form-check-input" type="radio" name="dadosCadastrais" id="inlineRadio3" value="option3" @change="erro">

脚本部分：

var vue = new Vue({
        el: '#app',
        data: {
            status: ''
        }

和 method() 部分：

ok() {
    this.status = 'bg-primary text-white'},
    //will code some AJAX too
falta() {
    this.status = 'bg-warning text-black'},
    //will code some AJAX too
erro() {
    this.status = 'bg-danger text-white'
    //will code some AJAX too
    }

底牌套牌代码为：

<div class="card-columns">
            <div class="card" :class="status">
                <div class="card-body">
                    <h5 class="card-title">Dados Cadastrais</h5>
                    <p class="card-text">
                    LOGRADOURO: @{{ rua }}, </p><p> NÚMERO: @{{ numero }}, </p><p> BAIRRO: @{{ bairro }}, </p><p> TEMPO DE RESIDÊNCIA: @{{ tempoResidencia
                    }}, </p><p> CIDADE: @{{ cidade }}, </p><p> UF: @{{ uf }}, </p><p> TELEFONE: @{{ telefone }}, </p><p> CELULAR: @{{ celular }}, </p><p> CEP:
                    @{{ CEP }}
                    </p>
                </div>
                <div class="card-footer text-muted">
                    <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosCadastrais" id="inlineRadio1" value="option1" @change="ok">   <label class="form-check-label" for="inlineRadio1">OK</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosCadastrais" id="inlineRadio2" value="option2" @change="falta">   <label class="form-check-label" for="inlineRadio2">Falta</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosCadastrais" id="inlineRadio3" value="option3" @change="erro">   <label class="form-check-label" for="inlineRadio3">Erro</label> </div>
                </div>
            </div>
            <div class="card" :class="status">
                <div class="card-body">
                    <h5 class="card-title">Dados do Bem</h5>
                    <p class="card-text">
                    CONTRATO: @{{ contrato }}, </p><p> GRUPO: @{{ grupo }}, </p><p> COTA: @{{ cota }}, </p><p> VALOR: @{{ valor }}, </p><p> PESSOA: @{{ pessoa }}, </p><p> BEM CONTRATADO: @{{ segmento }}, </p><p> BEM ESCOLHIDO: @{{ novoSegmento }}, </p><p> idERP: @{{ idERP }}, </p>
                </div>
                <div class="card-footer text-muted">
                    <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosBem" id="inlineRadio1" value="option1" @change="ok">   <label class="form-check-label" for="inlineRadio1">OK</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosBem" id="inlineRadio2" value="option2" @change="falta">   <label class="form-check-label" for="inlineRadio2">Falta</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosBem" id="inlineRadio3" value="option3" @change="erro">   <label class="form-check-label" for="inlineRadio3">Erro</label> </div>
                </div>
            </div>
            <div class="card" :class="status">
                <div v-if="contas != ''">
                    <div class="card-body">
                            <h5 class="card-title">Dados Bancários</h5>
                            <p class="card-text">
                                BANCO: @{{ contas.banco }}, </p>
                            <p> AGÊNCIA: @{{ contas.agencia }}, </p>
                            <p> CONTA CORRENTE: @{{ contas.conta }}, </p>
                    </div>
                    <div class="card-footer text-muted">
                        <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosBancarios" id="inlineRadio1" value="option1" @change="ok">   <label class="form-check-label" for="inlineRadio1">OK</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosBancarios" id="inlineRadio2" value="option2">   <label class="form-check-label" for="inlineRadio2">Falta</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosBancarios" id="inlineRadio3" value="option3">   <label class="form-check-label" for="inlineRadio3">Erro</label> </div>
                    </div>
                </div>
                <div v-else>
                    <div class="card-body">
                        <h5 class="card-title">Dados Bancários</h5>
                        <form v-on:submit.prevent="sub" action="#" method="post">
                        @method('POST')
                        @csrf
                        <div class="form-group">
                            <label for="banco">Banco</label>
                            <input type="text" v-model="banco" class="form-control" id="banco">
                        </div>
                        <div class="form-group">
                            <label for="agencia">Agência</label>
                            <input type="text" v-model="agencia" class="form-control" id="agencia">
                        </div>
                        <div class="form-group">
                            <label for="conta">Conta Corrente</label>
                            <input type="text" v-model="conta" class="form-control" id="conta">
                        </div>
                            <button type="submit" class="btn btn-primary">Cadastrar</button>
                        </form>
                    </div>
                    <div class="card-footer text-muted">
                        <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosBancarios" id="inlineRadio1" value="option1" @change="ok">   <label class="form-check-label" for="inlineRadio1">OK</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosBancarios" id="inlineRadio2" value="option2">   <label class="form-check-label" for="inlineRadio2">Falta</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosBancarios" id="inlineRadio3" value="option3">   <label class="form-check-label" for="inlineRadio3">Erro</label> </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Dados de Patrimônio</h5>
                    <p class="card-text">
                        AÇÕES: @{{ patrimonios.valorAcoes }}, </p>
                        <p> AUTOMÓVEIS: @{{ patrimonios.valorAutomovies }}, </p>
                        <p> IMÓVEIS: @{{ patrimonios.valorImovel }}, </p>
                        <p> INVESTIMENTOS: @{{ patrimonios.valorInvestimentos }}, </p>
                        <p> TOTAL: @{{ patrimonios.valorTotal }}, </p>
                    </div>
                    <div class="card-footer text-muted">
                        <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosPatrimonio" id="inlineRadio1" value="option1">   <label class="form-check-label" for="inlineRadio1">OK</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosPatrimonio" id="inlineRadio2" value="option2">   <label class="form-check-label" for="inlineRadio2">Falta</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosPatrimonio" id="inlineRadio3" value="option3">   <label class="form-check-label" for="inlineRadio3">Erro</label> </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Endereços de Patrimônios</h5>
                        <div v-for="imovel in imoveis">
                            <p class="card-text">RUA: @{{ imovel.rua }}, </p>
                            <p> NÚMERO: @{{ imovel.nroReferencia }}, </p>
                            <p> COMPLEMENTO: @{{ imovel.complementoPatrimonio }}, </p>
                            <p> BAIRRO: @{{ imovel.bairroPatrimonio }}, </p>
                            <p> CEP: @{{ imovel.cep }}, </p>
                            <p> CIDADE: @{{ imovel.cidadePatrimonio }}, </p>
                            <p> UF: @{{ imovel.UFPatrimonio }}, </p>
                            <hr>
                        </div>
                    </div>
                    <div class="card-footer text-muted">
                        <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="endPatrimonio" id="inlineRadio1" value="option1">   <label class="form-check-label" for="inlineRadio1">OK</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="endPatrimonio" id="inlineRadio2" value="option2">   <label class="form-check-label" for="inlineRadio2">Falta</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="endPatrimonio" id="inlineRadio3" value="option3">   <label class="form-check-label" for="inlineRadio3">Erro</label> </div>
                    </div>
            </div>
            <div class="card" v-if="correspondencia != ''">
                <div class="card-body">
                    <h5 class="card-title">Endereço de Correspondência</h5>
                    <div v-if="correspondencia != ''">
                        <p class="card-text">RUA: @{{ correspondencia.rua }}, </p>
                        <p> NÚMERO: @{{ correspondencia.numero }}, </p>
                        <p> BAIRRO: @{{ correspondencia.bairro }}, </p>
                        <p> CEP: @{{ correspondencia.cep }}, </p>
                        <p> CIDADE: @{{ correspondencia.cidade }}, </p>
                        <p> UF: @{{ correspondencia.UF }}, </p>
                    </div>
                </div>
                <div class="card-footer text-muted">
                    <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="endCorrespondencia" id="inlineRadio1" value="option1">   <label class="form-check-label" for="inlineRadio1">OK</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="endCorrespondencia" id="inlineRadio2" value="option2">   <label class="form-check-label" for="inlineRadio2">Falta</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="endCorrespondencia" id="inlineRadio3" value="option3">   <label class="form-check-label" for="inlineRadio3">Erro</label> </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Dados Profissionais</h5>
                    <p class="card-text">PROFISSÃO: @{{ profissao.profissao }}, </p>
                    <p> CARGO: @{{ profissao.cargo }}, </p>
                    <p> SALÁRIO: @{{ profissao.salario }}, </p>
                    <p> EMPRESA: @{{ profissao.empresa }}, </p>
                    <p> EMAIL: @{{ profissao.emailEmpresa }}, </p>
                    <p> CNPJ: @{{ profissao.cnpj }}, </p>
                    <p> RUA: @{{ profissao.logradouro }}, </p>
                    <p> CEP: @{{ profissao.cep }}, </p>
                    <p> Cidade: @{{ profissao.cidade }}, </p>
                    <p> UF: @{{ profissao.UF }}, </p>
                    <p> BAIRRO: @{{ profissao.bairro }}, </p>
                    <p> TELEFONE: @{{ profissao.ddd }} - @{{ profissao.telefoneComercial }} </p>
                    <p> RAMAL: @{{ profissao.ramal }}</p>
                </div>
                <div class="card-footer text-muted">
                    <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosProfissionais" id="inlineRadio1" value="option1">   <label class="form-check-label" for="inlineRadio1">OK</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosProfissionais" id="inlineRadio2" value="option2">   <label class="form-check-label" for="inlineRadio2">Falta</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="dadosProfissionais" id="inlineRadio3" value="option3">   <label class="form-check-label" for="inlineRadio3">Erro</label> </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Referências Pessoais</h5>
                    <div v-for="referencia in referencias">
                        <p class="card-text">NOME: @{{ referencia.nome }}, </p>
                        <p> ENDEREÇO: @{{ referencia.endereco }}, @{{ referencia.numero }}</p>
                        <p> CIDADE: @{{ referencia.cidade }}, </p>
                        <p> UF: @{{ referencia.UF }}, </p>
                        <p> CEP: @{{ referencia.cep }}, </p>
                        <p> COMPLEMENTO: @{{ referencia.complemento }}, </p>
                        <p> TELEFONE: (@{{ referencia.ddd }}) @{{ referencia.telefone }}, </p>
                        <hr>
                    </div>
                </div>
                <div class="card-footer text-muted">
                    <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="refPessoais" id="inlineRadio1" value="option1">   <label class="form-check-label" for="inlineRadio1">OK</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="refPessoais" id="inlineRadio2" value="option2">   <label class="form-check-label" for="inlineRadio2">Falta</label> </div> <div class="form-check form-check-inline">   <input class="form-check-input" type="radio" name="refPessoais" id="inlineRadio3" value="option3">   <label class="form-check-label" for="inlineRadio3">Erro</label> </div>
                </div>
            </div>
        </div>

我怎样才能让它尽可能干燥，并且只更换我想更换的卡片？

标签： javascriptvue.js

Answer 1

您可以使用 vue-refs 来获取特定元素。

这是重现的简单代码：

模板

<div class="card" ref="card-1">
  <div class="card-body">
    .....
  </div>
  <div class="card-footer text-muted">
   <input @click="setClass(1, 'bg-primary text-white')">
   <input @click="setClass(1, 'bg-warning text-black')">
   <input @click="setClass(1, 'bg-danger text-white')">
  </div>
</div>

<div class="card" ref="card-2">
  <div class="card-body">
    .....
  </div>
  <div class="card-footer text-muted">
   <input @click="setClass(2, 'bg-primary text-white')">
   <input @click="setClass(2, 'bg-warning text-black')">
   <input @click="setClass(2, 'bg-danger text-white')">
  </div>
</div>

---

Methods: {
  setClass(index, className) {
    const elem = this.$refs[`card-${index}`]
    elem.className = className
  }
}