使用VueJS为多张卡更改课程

问题描述 投票：2回答：3

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

我想改变每张卡的状态而不改变其他卡。所以我创建了一个在@change事件上更改类的方法，但是因为所有卡都绑定了相同的'数据'，比如'status'，更改一个，更改全部。

我们来看一些代码

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

而方法（）部分：

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>

我怎么能尽可能多地干，并且只改变我想改变的卡？

javascript vue.js
3个回答
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
  }
}
0
投票

添加数据元素：

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以获取该卡中的下一张卡片和方法，依此类推。

0
投票

我建议直接在对象上存储状态。为此，v-for中使用的列表必须位于组件data内，因此它是可编辑的。

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

<div class="card">
    <div class="card-body" :class="referencia.status">
        <h5 class="card-title">Referências Pessoais</h5>
        <div v-for="referencia in referencias">
            <p class="card-text">
              NOME: @{{ referencia.nome }}
            </p>
            ...
            <hr>
        </div>
    </div>
    <div class="card-footer text-muted">
      <button class="some-styling-here" @click="referencia.status = 'ok'"> OK </button>
      <button class="some-styling-here" @click="referencia.status = 'falta'"> Falta </button>
      <button class="some-styling-here" @click="referencia.status = 'erro'"> Erro </button>
    </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.