Home>

We have created a function that searches by comparing the character string for the tag registered in CSV with the character string of the selected tag.
I was able to implement the search when selecting a single tag, but when I select multiple tags, I'm worried that I can't make the search function well.

Error message

No search results when multiple tags are selected.

Error message
Applicable source code
<section>
            
                # {{item}}
            
        </section>
let vue = new Vue ({
        el: '#app',
        data: {
            itemData: null,
            selectTag: [],
            tagArray: ["TILE_CARPET", "VINYL_FLOOR_TILE", "OFFICE", "CAFE", "SHOP", "HOTEL", "WOOD", "STONE", "HERRINGBONE", "ALL"]
        },
        watch: {
            selectTag: function () {
                for (let i in this.itemData) {
                    let tagData = this.itemData [i];
                    let replaceCell = tagData.tags.split ('|');
                    for (let n in replaceCell) {
                        if (replaceCell [n] == this.selectTag) {
                            this. $set (this.itemData [i], 'show', true);
                            break;
                        } else if (this.selectTag.length == 0) {
                            this. $set (this.itemData [i], 'show', true);
                            break;
                        } else {
                            this. $set (this.itemData [i], 'show', false);
                        }
                    }
                }
            }
        },
        computed: {
        },
        methods: {
            filterItem: function (value) {
                if (value == 'ALL') {
                    this.selectTag = [];
                } else {
                    let tagArray = this.selectTag;
                    let result = this.selectTag.some (function (item) {
                        return item === value;
                    });
                    if (result === false) {
                        this.selectTag.push (value);
                    } else {
                        for (let i in tagArray) {
                            if (tagArray [i]! == value) {
                                this.selectTag = [];
                                this. $nextTick (function () {
                                    this.selectTag.push (tagArray [i]);
                                })
                            } else {
                                this.selectTag = [];
                            }
                        }
                    }
                }
            },
path csv tags show
data01 item_01 TILE_CARPET | OFFICE | WOOD TRUE
~~~~ The following abbreviations

Please describe what you tried for the problem here.

Supplemental information (FW/tool version etc.)

Create tag button with tagArray, process value with filterItem
If there is the same string as value, omit it and put it back into the selectTag array of data
If it is ALL, the contents of selectTag are reset.

We split csv's tags with split, compare them, and if there is the same, csv's show is set to true
If i search by itself, it works fine, but if you use multiple loops, it wouldn't work well even if you used loop processing.

  • Answer # 1

    Vue.js isn't bright, but it feels likewatch.selectTagprocessing from the question text,
    I will give you an opinion.

    I was interested in twobreakstatements infor (let n in replaceCell).
    Isn't the intended result obtained only once because the loop is now complete?

    Rewrite these two places withcontinustatements.
    This interrupts processing, but should evaluate the next loop.

Related articles