**i have placed image below of my components i need to translate title and content form the array in home component and bind props to info component as u said $t does not work with data method how can i achieve with computed
pls help **
[home component][1]
[info component][2]
[1]: https://i.stack.imgur.com/fKRXq.png
[2]: https://i.stack.imgur.com/tWbt2.png
$t is a computed property and is not accessible from within the data method. To work around, make content a computed property.
It looks like you're rendering the result of some query, so make that a prop that's passed into your component, then consume the prop in your computed property:
<template>
<div>
<span>{{infonew.id}}</span>
<heading>{{infonew.title}}</heading>
<section>{{content}}</section>
</div>
</template>
<script>
export default {
name: 'InfoNews',
props: ['infonew'],
computed: {
content () {
return this.$t(this.infonew.content);
}
}
}
</script>
Related
when passing dynamic props, we use : or v-bind. However, any variables within these v-binds refers to the data stored within the component rather than within the script (passes on data in the component that can be referenced using "this.data".
However, that is not what I want to do in this case, I want to pass down an imported function into a prop, which is referenced within the component without a "this." in front of the function. When I try to pass it on as a prop, it says "functionName" is defined but never used", how do you go about passing on imported functions as dynamic props? See the code below for more details.
<template>
<componentName
:propName="functionName"
/>
</template>
<script>
import {functionName} from "./helperFunctions.js"
export default {
components: {componentName}
}
why not passing as an event? however you can pass this function as a prop via getters:
<template>
<componentName
:propName="myFuncProp"
/>
</template>
<script>
import {functionName} from "./helperFunctions.js"
export default {
components: {componentName},
computed: {
myFuncProp () {
return functionName
}
}
}
</script>
We are looking to get the contents from the html (for example using a slot ) but we later (after mounting) want to bind this to a variable as one would do with a v-html.
In other words we want on initialization to have the contents being loaded as they appear in the slot and later this entire piece of content to be controlled by a binding variable like v-html (because it will be html content).
How to achieve this? without following any ugly solutions such as needing to pass the entire initial html content inside v-html attribute!
You can try like this
<template>
<custom-component>
<div v-if="html_variable" v-html="html_variable"></div>
<template v-else>
<!-- default content here -->
</template>
</custom-component>
</template>
<script>
export default
{
data()
{
return {html_variable: null};
}
}
</script>
How using v-html is ugly? Anyway just use a non-visible element to define your initial html. a <script ref="initHTML" type="text/html"> ... </script> might be a good option.
Define a data entry that should hold your HTML init:
data () {
return {
dHTML: '',
}
},
On created() update your initial html state using the ref
created() {
this.dHTML = this.$refs.initHTML.innerHTML;
},
Now you can have a pretty v-html="dHTML"
I'm using vuejs2. I want to create a method in my component and then call it to bind a class to it, but I can't get it to work. This is what I want to accomplish more or less, where getMachineClass() ideally would be a method in my machine component.
<machine
v-for="item in machinesList"
v-bind:key="item.id"
v-bind:machine="item"
v-bind:class="item.getMachineClass()">
</machine>
I know I can just put the method in my vue instance and then call it like this:
v-bind:class="getMachineClass(item)
I would like the method to be just in the component though. What can I do about it?
Machine component:
Vue.component('machine', {
props: ['machine'],
template: '#machine',
data: function () {
return {
translations: translations,
options: options
}
},
mounted: ...
});
You can just bind the class on the root element of your machine component
//machine component template
<script type="text/x-template" id="machine">
<div v-bind:class="getMachineClass(machine)">
//...
</div>
</script>
Since you are receiving the iterated item as a machine prop, pass it to the getMachineClass method
Component Code
<template lang="html">
<div class="chat-users">
<ul class="list-unstyled">
<li v-for="chatuser in chatusers" class="left clearfix">
{{ chatuser.UserName }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: ["chatusers"],
created() {
axios.post("some url").then(response => {
this.chatusers = response.data.Data;
});
}
}
</script>
<style>
</style>
Everything works perfectly, but I am getting below warning.
Avoid mutating a prop directly since the value will be overwritten
whenever the parent component re-renders. Instead, use a data or
computed property based on the prop's value. Prop being mutated:
"chatusers"
There is an explanation why prop should not be mutate in the vue documentation. If you need to mutate the state, perhaps you need a data instead.
Like:
export default {
data () { return { chatusers: null } },
created() {
axios.post("some url").then(response => {
this.chatusers = response.data.Data;
});
}
}
It is not the best way to mutate the props, since the parent is in control of this data and any changes it will overwrite child data, from the docs:
In addition, every time the parent component is updated, all props in
the child component will be refreshed with the latest value. This
means you should not attempt to mutate a prop inside a child
component. If you do, Vue will warn you in the console.
According to Vue.js data flow, the props received from parent should not be modified by child component. See the official documentation and this Stack Overflow answer.
As suggested by your warning: "use a data or computed property based on the prop's value", that in your case is the response received from axios call.
I would like to create Side Panel as a reusable component in Framework7 with VueJS. Here is my code..
Card.vue
<f7-card>
<f7-card-header>Card header content</f7-card-header>
<f7-card-content><img src="https://wiki.videolan.org/images/Ubuntu-logo.png"></img></f7-card-content>
<f7-card-footer>Card footer content</f7-card-footer>
</f7-card>
Now i registered as a component like below,
import Vue from 'vue'
export default [
{
path: '/card/',
component: require('./Card')
},
]
In later vues i imported as,
import Card from './Card.vue'
and i try to access in another vues like,
Now i'm getting an error like
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
Can anyone help me where have i mistaken?
Thanks,
It's not really clear from your code exactly what you are doing, but the error you are getting happens when you try to use a component as a child of another component without registering it in the parent's components setting like this:
<script>
import Card from './Card.vue'
export default {
data () {
return {
somedata: 'some value'
}
},
components: {Card: Card}, // <- you're missing this
// etc...
}
</script>
You can also register components globally. More here: https://v2.vuejs.org/v2/guide/components.html#Local-Registration
Are you showing us all of Card.vue? For a valid single-file vue component, I would expect to see <template>, <script> and <style> elements. The render function will be generated from whatever you put in the <template> element.
Make sure that the component that you want to reuse is wrapped inside a template tag
As follows
<template>
<div>
<component data/>
<div/>
<template/>
Then register it inside the parent
Like so
export default {
name: "Card",
components: {
Card
},
};