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>

我怎么能做到尽可能干，只更换我想更换的卡？

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

Answer 2

添加数据元素：

data: {
  oks: [],
  faltas: [],
  erros: []
}

在方法中添加一些新逻辑：

falta(index) {
  if (!this.faltas.includes(index)) {
    this.faltas.push(index)
  } 

  // other stuff
}

为您的erro()方法重复此操作。

确保为ok()方法添加相反的逻辑：

if (this.erros.includes(index)) {
  this.erros.splice(this.erros.findIndex(el => el === index), 1)
}

根据索引的存在动态更改卡类别：

<div class="card" :class="{'bg-primary text-white': this.faltas.includes(1)'}">

根据包含在其中添加任何其他条件，例如oks.includes(id)和errors.includes(id)

并更新输入元素的方法以传递此卡的唯一索引器：

@change="ok(1)"
@change="falta(1)"
@change="erro(1)"

然后只需将1更改为2，以换取下一张卡以及该卡中的方法，依此类推。

Answer 3

我建议直接将状态存储在对象上。为此，Incentive Spending = SUM(Program_Data[Incentives])中使用的列表必须在组件v-for内，以便可以编辑。

使用这种方法，无需跟踪谁具有什么状态，索引等。每个对象都对其自己的状态负责。在此示例中，我假设将设置具有正确样式的类data，ok和falta。

erro

使用VueJS更改几张卡片的课程

3 个答案: