Question

我正在创建一个表，用户可以在其中添加列和行。除了第一行和第一列之外的所有单元格都有可点击的输入附件，以显示输入中的值是美元还是％。

问题是当我单击该值时，该值无法正确显示。指标始终停留在％。数据更改，如果我提交，则将其正确保存在数据库中。

当我打开一个现有表时，指示器是正确的指示器，如果单击它，它将对其进行更改。因此，它几乎可以按预期工作。唯一的问题是当我创建新的行或列时。

有处理开关的代码：

    <tr v-for="rateRow in openV3Rate.rateRows">
        <td>
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control text-xs text-right" v-model="rateRow.percentage">
                    <span class="input-group-addon text-xs">%</span>
                </div>
            </div>
        </td>
        <td v-for="rateColumn in openV3Rate.rateColumns">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control text-xs text-right" v-model="cells[openV3Rate.rateRows.indexOf(rateRow)+'_'+openV3Rate.rateColumns.indexOf(rateColumn)].ristourne">
                    <span class="input-group-addon text-xs clickable" v-on:click="(cells[openV3Rate.rateRows.indexOf(rateRow)+'_'+openV3Rate.rateColumns.indexOf(rateColumn)].type == 1) ? cells[openV3Rate.rateRows.indexOf(rateRow)+'_'+openV3Rate.rateColumns.indexOf(rateColumn)].type = 2 : cells[openV3Rate.rateRows.indexOf(rateRow)+'_'+openV3Rate.rateColumns.indexOf(rateColumn)].type = 1">
                        <span>{{(cells[openV3Rate.rateRows.indexOf(rateRow)+'_'+openV3Rate.rateColumns.indexOf(rateColumn)].type == 1) ? '%' : '$'}}</span>
                    </span>
                </div>
            </div>
        </td>
        <td>
            <button class="btn btn-sm btn-default" type="button" v-on:click="deleteRateRow(rateRow)"><i class="fa fa-times"></i></button>
        </td>
    </tr>

我的第一次尝试是使用一种更改cell.type值的方法：

    changeRistourneType: function(cell) {
        if (this.cells[cell].type === 1) {this.cells[cell].type = 2} else {this.cells[cell].type = 1};
    }

在此方法中，我使用console.log显示了多个变量，以查看cell.type是否正确更改。因此，更改后，this.cells表明我单击的cell.type是好的。

然后，我尝试更改将指标（％或$）显示为vue.js组件的跨度。我使用此v-bind:type="cells[openV3Rate.rateRows.indexOf(rateRow)+'_'+openV3Rate.rateColumns.indexOf(rateColumn)].type"将值绑定到组件，然后将type用作道具。失败，结果相同。

因此，有一些代码添加一行和一列：

    addRateRow: async function() {
        var response = await api.getModel('V3RateRow', null);
        if (typeof response.status !== 'undefined') {
            var x = this.openV3Rate.rateRows.length;
            for (var y = 0; y < this.openV3Rate.rateColumns.length; y++) {
                this.cells[x+'_'+y] = {created_at:null,deleted_at:null,id:null,v3_rate_id:null,v3_rate_row_id:null,v3_rate_column_id:null,ristourne:null,type:1,updated_at:null};
            }
            this.openV3Rate.rateRows.push(response.data.data);
        }
    },

    addRateColumn: async function() {
        var response = await api.getModel('V3rateColumn', null);
        if (typeof response.status !== 'undefined') {
            var y = this.openV3Rate.rateColumns.length;
            for (var x = 0; x < this.openV3Rate.rateRows.length; x++) {
                this.cells[x+'_'+y] = {created_at:null,deleted_at:null,id:null,v3_rate_id:null,v3_rate_row_id:null,v3_rate_column_id:null,ristourne:null,type:1,updated_at:null};
            }
            this.openV3Rate.rateColumns.push(response.data.data);
        }
    },

从服务器加载表时，有构建表的代码：

    buildExistingRate: function() {
        var self = this;
        for (var y = 0; y < this.openV3Rate.rateColumns.length; y++) {
            for (var x = 0; x < this.openV3Rate.rateRows.length; x++) {
                var find = false;
                this.openV3Rate.rateRistournes.forEach(function(cell) {
                    if (cell['v3_rate_row_id'] === self.openV3Rate.rateRows[x].id && cell['v3_rate_column_id'] === self.openV3Rate.rateColumns[y].id) {
                        self.cells[x+'_'+y] = cell;
                        find = true;
                    }
                });
                if (find = false) {
                    self.cells[x+'_'+y] = {created_at:null,deleted_at:null,id:null,v3_rate_id:null,v3_rate_row_id:self.openV3Rate.rateRows[x].id,v3_rate_column_id:self.openV3Rate.rateColumns[y].id,ristourne:null,type:1,updated_at:null};
                }
            }
        }
    },

通过方法buildExistingRate创建的所有指标均正常工作。

我真的不知道下一步该怎么解决。

Vue.js-如何在动态表格中正确绑定项目

0 个答案: