代码之家 › 专栏 › 技术社区 › code-8

在动态追加另一行之前检查输入是否已填充

vuetify.js vuejs2 vue.js javascript

code-8 · 技术社区 · 4 年前

我有ADD按钮,当我点击它时,我添加了一行。我想添加一个限制, if only if 第2行被填充,则第3行将被显示。如果填写了3,那么将显示4,你就明白了。。。

我试过一些东西,但我认为我走错了路。

// console.log('rule',rule)

// if(rule.attribute.name != '' && rule.operator != '' && rule.value != ''){
//  this.rules.push(rule)
// }

现在,它无休止地附加。。。

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">


<template id="mainbox">
    <v-card outlined >
        <v-list-item three-line>
            <v-list-item-content>
                <div class="text-overline mb-4">

                    {{ title }}
                </div>
                <v-container>
                    <!-- -------------------------------------------------------------------------- -->
                    <v-divider></v-divider>
                    <!-- -------------------------------------------------------------------------- -->
                    <!-- TEST CODE -->
                    <!-- --------- -->




                    <v-col cols="12">
                        <v-btn color="primary" outlined @click="addRule()"> Add </v-btn>
                    </v-col>



                    <v-row v-for="(rule, index) in rules" :key="rule.id">

                        <v-col cols="4">
                            <v-select dense outlined item-text="name" :items="attributes" item-value="id" v-model="rule.attribute.id" label="Attribute"></v-select>
                        </v-col>

                        <v-col cols="4">
                            <v-combobox v-model="rule.operator" :items="operators" item-text="operator" item-value="id" label="Operator" outlined dense></v-combobox>
                        </v-col>

                        <v-col cols="4">
                            <v-text-field v-model="rule.value" :items="values" label="Value" multiple outlined dense></v-text-field>
                        </v-col>
                    </v-row>



                    <!-- -------------------------------------------------------------------------- -->
                    <v-divider></v-divider>
                    <!-- -------------------------------------------------------------------------- -->
                    <!-- LIVE VALUE -->
                    <!-- --------- -->


                    <v-alert
                    outlined
                    type="success"
                    text
                    >
                    <b>this.rules :</b>  {{ rules }}
                </v-alert>




            </v-container>
        </v-list-item-content>
    </v-list-item>
</v-card>
</template>


<v-app id="app">


    <!-- -------------------------------------------------------------------------- -->
    <!-- TITLE -->
    <!-- ----- -->



    <mainbox title="$CODE_08" />


    <!-- -------------------------------------------------------------------------- -->


</v-app>

<script type="text/javascript">

    const mainbox = Vue.component('mainbox', {
        template: '#mainbox',
        props: { title: String },
        data() {
            return {
                rules: [
                
                {
                    attribute: {
                        name: 'Style name',
                        id: 3
                    },
                    operator: '=',
                    value: '123'
                }

                ],
                operators: ['=', '!='],
                values: ['China', 'US', ' Thai'],
                attributes : [ { "id": 1, "name": "Style name", "alias": null, "attribute": "STYLE_NAME", "category_id": 1, "data_type_id": 3, "data_type_name": "String" }, { "id": 2, "name": "Country", "alias": null, "attribute": "COUNTRY_NAME", "category_id": 2, "data_type_id": 3, "data_type_name": "String" }, { "id": 3, "name": "Serial number", "alias": null, "attribute": "scanstring", "category_id": 3, "data_type_id": 3, "data_type_name": "String" }, { "id": 4, "name": "Brand Name", "alias": null, "attribute": "BRAND_NAME", "category_id": 1, "data_type_id": 3, "data_type_name": "String" }, { "id": 5, "name": "Account/Customer Name", "alias": null, "attribute": "CUSTOMER_NAME", "category_id": 1, "data_type_id": 3, "data_type_name": "String" }, { "id": 6, "name": "Product UPC", "alias": null, "attribute": "PRODUCT_UPC", "category_id": 1, "data_type_id": 3, "data_type_name": "String" }, { "id": 7, "name": "Label batch", "alias": null, "attribute": "LABEL_HEADER_ID", "category_id": 3, "data_type_id": 1, "data_type_name": "Number" }, { "id": 8, "name": "Current time", "alias": null, "attribute": "time(convert_tz(now(),'UTC','${PARAM}'))", "category_id": 4, "data_type_id": 5, "data_type_name": "Time" } ]

            }
        },
        methods: {
            addRule() {
                console.log('addRule clicked')
                let rule = {
                    attribute: {
                        name: '',
                        id: 0
                    },
                    operator: '',
                    value: ''
                }

                // console.log('rule',rule)

                // if(rule.attribute.name != '' && rule.operator != '' && rule.value != ''){
                //  this.rules.push(rule)
                // }


                this.rules.push(rule)
            }
        }
    });


    new Vue({ el:"#app", vuetify: new Vuetify(), components: { mainbox } });

</script>

0 回复 | 直到 4 年前

jmrker 4 年前

根据您的需要修改以下内容,但它应该会给您一个开始:

<!DOCTYPE html>
<html>
<!-- From: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insert_deleterow 
      For: https://stackoverflow.com/questions/70809292/check-if-inputs-filled-before-dynamically-append-another-row 
-->
<head>
<style>
 td { border: 1px solid black; }
</style>
</head>
<body>

<p>Click the buttons to create and delete row(s) for the table.</p>

<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Optional Delete row</button>
<p/>

<table id="myTable">
  <tr> <!-- filled with values for testing purposes only -->
    <td><input type="text" value="Row1 cell1"></td>
    <td><input type="text" value="Row1 cell2"></td>
    <td><input type="text" value="Row1 cell3"></td>
  </tr>
</table>
<br>

<script>
const insertHTMLAfter = (html, el) => el.insertAdjacentHTML('beforeend', html);

function myCreateFunction() {
  let tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0],
      lastRow = tbodyRef.rows.length-1;

  const sel = document.querySelectorAll('#myTable input');  // alert(sel.length);
  let cell1 = sel[lastRow*3+0].value,
      cell2 = sel[lastRow*3+1].value,
      cell3 = sel[lastRow*3+2].value;                       // alert(cell1 +', '+ cell2 +', '+ cell3);

  if ( (cell1 != '') && (cell2 != '') ) {                   // optional check of cell3 possible here
    lastRow += 2;
    insertHTMLAfter(  
`  <tr>
    <td><input type="text" value=""></td>
    <td><input type="text" value=""></td>
    <td><input type="text" value=""></td>
  </tr>
`, tbodyRef);
  }
}

// optional function
function myDeleteFunction() {
  var tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
  lastRow = tbodyRef.rows.length;
  document.getElementById("myTable").deleteRow(lastRow-1);
}
</script>

</body>
</html>

Romalex 4 年前

addRule() {
    console.log('addRule clicked')
    let newRule = {
        attribute: {
            name: '',
            id: 0
        },
        operator: '',
        value: ''
    }

    const lastRule = this.rules.at(-1)
    if (!lastRule || lastRule.attribute.name != '' && lastRule.operator != '' && lastRule.value != '') {
        this.rules.push(newRule)
    }
}