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.
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
Related articles
- javascript - i want to insert the value of the item selected in the pull-down into the input tag
- javascript: i want to get the value of the selected option value
- javascript get the selected option value
- javascript - assign the same value selected in the select box to the api variable and reload the graph
- javascript - [search screen] when you want to include items other than in the parameters
- javascript - i want to delete multiple items selected in the check box after displaying them in modal
- javascript - i want to receive and display a value in a dialog box
- javascript - unable to retrieve json format value with thymeleaf
- awk command that combines items with the same value in one column into one row
- javascript - how to increase the pull-down value
- i want to run the page displayed by google search with javascript i made
- # if you change the value once entered with the score input function with javascript, it will become nan
- python 3x - a i want to get the value of values of the line selected in the list of files
- javascript - when i display the value entered in the form, it is displayed as undefined
- javascript - i want to get the value associated with the array key in the object
- 16 mass roulette with javascript (implementation of function not selected again)
- javascript - get the value of the array in the object , how to use in an if statement
- i want to display the value obtained from postgresql with javascript on erb
- javascript - i want to display the value entered in the created form in slack with incoming webhooks
- javascript - i want to use a value initialized in one class in another unrelated class with no arguments
- javascript : Find and add an object
- javascript : How do I set up debugging?
- javascript : VueJs. Managing page title and meta data
- javascript : How to connect css in nuxt js
- javascript : NuxtJS. Npm run generate doesn't work
- javascript : When entering numbers in vue.js in input, they need to be split into digits and separated by thousandths. How to im
- javascript : LocalStorage loop update (JS /Vue.js)
- javascript : How to get pdf of assets with vue
- javascript : Select value in select
- javascript : Counting dynamic fields in Vue js
Vue.js isn't bright, but it feels like
watch.selectTag
processing from the question text,I will give you an opinion.
I was interested in two
break
statements infor (let n in replaceCell)
.Isn't the intended result obtained only once because the loop is now complete?
Rewrite these two places with
continu
statements.This interrupts processing, but should evaluate the next loop.