I want to pass a result of a method to params. Here's my code
<template>
<router-link
v-bind:to="{
name: 'faq-page',
params: { id: selectedCategory },
}"
>
<li><a #click="findCategory(eachQuestion.id, faqData)">{{eachQuestion.question}}</a></li>
</router-link>
</template>
<script>
export default {
data() {
return {
selectedCategory: ''
}
},
methods: {
findCategory(id, list) {
const x = //function here
if (x) {
return this.selectedCategory = this.x.slug;
}
}
}
}
</script>
The idea of this code is, whenever a user click the <li>, the method will be executed to find x.slug. Then I want to pass the x.slug in the params. I believe I did something wrong with the code. What's the correct way to pass the method value to the params? Thanks so much.
Your method should not return the a value, and x is a local variable so you shouldn’t use this.x:
methods: {
findCategory(id, list) {
const x = //function here
if (x) {
this.selectedCategory = x.slug;
}
}
}
Related
Vue version : 3.1.1
Hey guys,
I'm working with dynamic Creation Component, which means a user can add whatever of component he wants.I create it base on this documentation dynamic component creation.
And I use this component vue image uploader.
I need to send an index when the user wants to upload the image, like this :
<div v-for="(line, index) in lines" v-bind:key="index">
{{index}}//if i log the index its 0,1,2,3 and its ok
...
<image-uploader
:preview="true"
:class-name="['fileinput', { 'fileinput--loaded': line.hasImage }]"
:capture="false"
:debug="0"
:auto-rotate="true"
output-format="blob"
accept="image/*"
#input="setImage(output , index)"
:ref="'fileUpload'+index"
>
...
And the setImage funciton :
setImage: function(output,index) {
console.log(index);
console.log(output);
return ;
this.lines[index].hasImage = true;
this.lines[index].image = output;
let formData = new FormData();
formData.append("file", output);
Ax.post(upload_route, formData, {
headers: { "Content-Type": "multipart/form-data" }
})
.then(response => {
// upload successful
})
.catch(error => console.log(error));
}
And the log result is:
The index always is 0 :(
How can i send an index when i want to upload it?
I read this passing event and index and test it but it's not working on component.
Because This is a custom event not a DOM event.
what should I do?
thanks.
Because you're actually passing the return value of setImage to the #input, not the method.
You can't just add extra parameters to setImage, as ImageUploader component just emit an image to the setImage. If you need to add extra parameters to that method, you need to create custom element that wrap ImageUploader.
It's something like this:
ImageUpload.vue
<template>
<image-uploader
:debug="0"
:autoRotate="true"
outputFormat="blob"
:preview="true"
:className="['fileinput', { 'fileinput--loaded' : hasImage }]"
:capture="false"
accept="image/*"
doNotResize="['gif', 'svg']"
#input="setImage"
v-on="listeners" />
</template>
<script>
export default {
props: {
index: {
required: true,
type: Number
}
},
data() {
return {
hasImage: false,
image: null
};
},
computed: {
listeners() {
const listeners = { ...this.$listeners };
const customs = ["input"];
customs.forEach(name => {
if (listeners.hasOwnProperty(name)) {
delete listeners[name];
}
});
return listeners;
}
},
methods: {
setImage(image) {
this.hasImage = true;
this.image = image;
this.$emit("input", this.index, image); // here, we emit two params, as index for the first argument, and the image at the second argument
}
}
};
</script>
Then, you can use that component something like this:
<template>
<div class="container">
<div v-for="(line, index) in lines" :key="index">
<image-upload :index="index" #input="setImage"/>
</div>
</div>
</template>
<script>
import ImageUpload from "./ImageUpload";
export default {
components: {
ImageUpload
},
data() {
return {
lines: ["1", "2", "3", "4"]
};
},
methods: {
setImage(index, image) {
console.log("Result", index, image);
}
}
};
</script>
See the working example: https://codesandbox.io/s/vue-template-ccn0e
Just use $event like this...
#input="setImage($event, index)"
...and you're done!
I'm building an chat client and I want to scan the messages for a specific tag, in this case [item:42]
I'm passing the messages one by one to the following component:
<script>
import ChatItem from './ChatItem'
export default {
props :[
'chat'
],
name: 'chat-parser',
data() {
return {
testData: []
}
},
methods : {
parseMessage(msg, createElement){
const regex = /(?:\[\[item:([0-9]+)\]\])+/gm;
let m;
while ((m = regex.exec(msg)) !== null) {
msg = msg.replace(m[0],
createElement(ChatItem, {
props : {
"id" : m[1],
},
}))
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
}
return msg
},
},
render(createElement) {
let user = "";
let msg = this.parseMessage(this.$props.chat.Message, createElement)
return createElement(
'div',
{
},
[
// "hello",// createElement("render function")
createElement('span', '['+ this.$props.chat.Time+'] '),
user,
msg,
]
)
}
};
</script>
I thought passing createElement to the parseMessage method would be a good idea, but it itsn't working properly as it replaces the tag with [object object]
The chatItem looks like this :
<template>
<div>
<span v-model="item">chatITem : {{ id }}</span>
</div>
</template>
<script>
export default {
data: function () {
return {
item : [],
}
},
props :['id'],
created() {
// this.getItem()
},
methods: {
getItem: function(){
obj.item = ["id" : "42", "name": "some name"]
},
},
}
</script>
Example :
if the message looks like this : what about [item:42] OR [item:24] both need to be replaced with the chatItem component
While you can do it using a render function that isn't really necessary if you just parse the text into a format that can be consumed by the template.
In this case I've kept the parser very primitive. It yields an array of values. If a value is a string then the template just dumps it out. If the value is a number it's assumed to be the number pulled out of [item:24] and passed to a <chat-item>. I've used a dummy version of <chat-item> that just outputs the number in a <strong> tag.
new Vue({
el: '#app',
components: {
ChatItem: {
props: ['id'],
template: '<strong>{{ id }}</strong>'
}
},
data () {
return {
text: 'Some text with [item:24] and [item:42]'
}
},
computed: {
richText () {
const text = this.text
// The parentheses ensure that split doesn't throw anything away
const re = /(\[item:\d+\])/g
// The filter gets rid of any empty strings
const parts = text.split(re).filter(item => item)
return parts.map(part => {
if (part.match(re)) {
// This just converts '[item:24]' to the number 24
return +part.slice(6, -1)
}
return part
})
}
}
})
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<div id="app">
<template v-for="part in richText">
<chat-item v-if="typeof part === 'number'" :id="part"></chat-item>
<template v-else>{{ part }}</template>
</template>
</div>
If I were going to do it with a render function I'd do it pretty much the same way, just replacing the template with a render function.
If the text parsing requirements were a little more complicated then I wouldn't just return strings and numbers. Instead I'd use objects to describe each part. The core ideas remain the same though.
I'm setting up a Vue.js project and connecting it to Firebase for the real time database.
Problem: I am able to save the data to the Firebase database however I am not able to render it to the view.
Error Message:
[Vue warn]: Property or method "names" is not defined on the instance
but referenced during render.
I have tried to adjust the vue instance "names" property by adding it the data function instead of making it a separate property in the instance, but that is not working.
<div id="app">
<label for="">Name</label>
<input type="text" name="" id="" v-model="name">
<button #click="submitName()">Submit</button>
<div>
<ul>
<li v-for="personName of names"
v-bind:key="personName['.key']">
{{personName.name}}
</li>
</ul>
</div>
</div>
<script>
import {namesRef} from './firebase'
export default {
name: 'app',
data () {
return {
name: "levi",
}
},
firebase: {
names: namesRef
},
methods: {
submitName() {
namesRef.push( {name:this.name, edit:false} )
}
}
}
</script>
<style>
Expected Result: Data saved to Firebase is rendered on the view
Actual result:
[Vue warn]: Property or method "names" is not defined on the instance
but referenced during render. Make sure that this property is
reactive, either in the data option, or for class-based components, by
initializing the property.
Essentially, you have an incorrect attribute in your Vue instance.. You need to move firebase into data..
([CodePen])
I was unable to get this working in a Stack Snippet..
~~~THE FIX~~~
VUE/JS
firebase.initializeApp({
databaseURL: "https://UR-DATABASE.firebaseio.com",
projectId: "UR-DATABASE"
});
const database = firebase.database().ref("/users");
const vm = new Vue({
el: "#app",
data: {
firebase: {
names: []
},
name: "SomeName"
},
methods: {
getFirebaseUsers() {
this.firebase.names = [];
database.once("value", users => {
users.forEach(user => {
this.firebase.names.push({
name: user.child("name").val(),
id: user.child("id").val()
});
});
});
},
handleNameAdd() {
let id = this.generateId();
database.push({
name: this.name,
id: id
});
this.name = "";
this.getFirebaseUsers();
},
generateId() {
let dt = new Date().getTime();
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
let r = ((dt + Math.random() * 16) % 16) | 0;
dt = Math.floor(dt / 16);
return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
});
}
},
mounted() {
this.getFirebaseUsers();
}
});
HTML
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase.js"> .
</script>
<div id="app">
<label for="">Name</label>
<input type="text" name="" id="" v-model="name">
<button #click="handleNameAdd">Submit</button>
<div>
<ul>
<li v-for="(person, index) in firebase.names"
v-bind:key="person.id">
{{person.name}} | {{person.id}}
</li>
</ul>
</div>
</div>
OLD ANSWER:
This is what it should look like inside of data:
...
data() {
firebase: {
names: [],
}
}
...
Therefore, the data in your v-for would be referenced via firebase.names like:
...
<li v-for="(personName, index) in firebase.names"
:key="index"> // <<-- INDEX IS NOT THE BEST WAY TO STORE KEYS BUT ITS BETTER THAN NOTHING
//:key="personName.id // <<-- YOU COULD ALSO DO SOMETHING LIKE THAT, IF YOU HAVE A UNIQUE ID PER PERSON
{{personName.name}}
</li>
...
OPTIMAL FIX:
You could use a computed property if you wanted to automatically save/retrieve data from firebase each time a user adds a new name...as outlined in the CodePen and Code Snippet..
THE ISSUE:
<script>
import {namesRef} from './firebase'
export default {
name: 'app',
data () {
return {
name: "levi",
}
},
firebase: { // <<--- THIS IS INVALID, AND WHY IT'S NOT RENDERING
names: namesRef // CHECK YOUR CONSOLE FOR ERRORS
},
methods: {
submitName() {
namesRef.push( {name:this.name, edit:false} )
}
}
}
</script>
Try this.
You need to return the object in data
<script>
import {namesRef} from './firebase'
export default {
name: 'app',
data () {
return {
name: "levi",
firebase: {
names: namesRef
},
}
},
methods: {
submitName() {
namesRef.push( {name:this.name, edit:false} )
}
}
}
</script>
<style>
Use a computed property for names. Computed is more appropriate than data in this case, mainly because the component does not own the data. If it eventually resided in a vuex store, for instance, it would then react to external changes.
<script>
import {namesRef} from './firebase'
export default {
name: 'app',
data () {
return {
name: "levi",
}
},
computed: {
names() {
return namesRef
}
}
methods: {
submitName() {
namesRef.push( {name:this.name, edit:false} )
}
}
}
</script>
Try this
<script>
import {namesRef} from './firebase'
export default {
name: 'app',
data () {
return {
name: "levi",
}
},
cumputed: {
names: namesRef
},
methods: {
submitName() {
namesRef.push( {name:this.name, edit:false} )
}
}
}
</script>
Got mine working.
The solution is pretty simple.
Add names:[] to data object so it looks like:
...
data () {
return {
name: "levi",
names:[]
}
},
....
That's pretty much it.
Explaination
The firebase object data needs to be defined in order to use it
If you have more issues check the vuex documentation replicate that to your code.
I am diving into Vue for the first time and trying to make a simple filter component that takes a data object from an API and filters it.
The code below works but i cant find a way to "reset" the filter without doing another API call, making me think im approaching this wrong.
Is a Show/hide in the DOM better than altering the data object?
HTML
<button v-on:click="filterCats('Print')">Print</button>
<div class="list-item" v-for="asset in filteredData">
<a>{{ asset.title.rendered }}</a>
</div>
Javascript
export default {
data() {
return {
assets: {}
}
},
methods: {
filterCats: function (cat) {
var items = this.assets
var result = {}
Object.keys(items).forEach(key => {
const item = items[key]
if (item.cat_names.some(cat_names => cat_names === cat)) {
result[key] = item
}
})
this.assets = result
}
},
computed: {
filteredData: function () {
return this.assets
}
},
}
Is a Show/hide in the DOM better than altering the data object?
Not at all. Altering the data is the "Vue way".
You don't need to modify assets to filter it.
The recommended way of doing that is using a computed property: you would create a filteredData computed property that depends on the cat data property. Whenever you change the value of cat, the filteredData will be recalculated automatically (filtering this.assets using the current content of cat).
Something like below:
new Vue({
el: '#app',
data() {
return {
cat: null,
assets: {
one: {cat_names: ['Print'], title: {rendered: 'one'}},
two: {cat_names: ['Two'], title: {rendered: 'two'}},
three: {cat_names: ['Three'], title: {rendered: 'three'}}
}
}
},
computed: {
filteredData: function () {
if (this.cat == null) { return this.assets; } // no filtering
var items = this.assets;
var result = {}
Object.keys(items).forEach(key => {
const item = items[key]
if (item.cat_names.some(cat_names => cat_names === this.cat)) {
result[key] = item
}
})
return result;
}
},
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-on:click="cat = 'Print'">Print</button>
<div class="list-item" v-for="asset in filteredData">
<a>{{ asset.title.rendered }}</a>
</div>
</div>
i have a form which have a couple of comps for inputs and inside each there is another comp for error, so i have
// input comp
<template></template>
<script>
import Store from '../../store'
export default {
props:['errors'],
data() {
return {
input: ''
}
},
computed: {
showError() {
if (this.errors && !this.input) {
return true;
}
}
}
}
</script>
// error comp
<template>
<span class="help-block">
<strong v-for="error in errors">
{{ error }}
</strong>
</span>
</template>
<script>
export default {
props: ['errors'],
watch: {
errors: (val) => {
this.$emit('newError')
}
},
}
</script>
// display the error
<form-errors :errors="errors" v-if="showError" v-on:newError="showError = !showError"></form-errors>
so what am after is
get the error watch to actually work as so far i don't know how to hook into the component update
how to override the computed prop of showError
No you can not overwrite the computed property like this: showError = !showError, You have to use some other approach.
Given that you want to show both errors: errors related to form input and error coming from backend: You can have following structure of your error variable:
errors: {
"backendErrors": [],
"formErrors" : []
}
Now you can have your computed property show error like following:
showError() {
if (this.errors.backendErrors || (this.errors.formErrors && !this.input) ) {
return true;
}
else{
return false
}
}
ot whatever other logic suits you.