I am using Nuxt and i have created Button component in a way that if we pass propsto, it will generate nuxt-link and if we set it to href, it will generate a tag.
the problem i am facing is if we pass to it generates a tag but without href attribute.
my Button.vue file
<template>
<component :is="type" :to="to" :href="href" class="btn btn-primary">
<slot/>
</component>
</template>
<script>
export default {
props: {
href: {
type: String,
default: null
},
to: {
type: String,
default: null
}
},
computed: {
type() {
if (this.to) {
return "nuxt-link";
} else if (this.href) {
return "a";
} else {
return "button";
}
}
}
};
</script>
<style scoped>
</style>
my Layout file
<script>
import Btn from '~/components/Button/Button.vue'
export default {
components: {
Btn
}
}
</script>
<template>
<b-container>
<Btn to="/about">I'm a Button</Btn>
</b-container>
</template>
<style scoped lang="scss">
</style>
Hi Zuber just use a simple nuxt-link router component.
<nuxt-link class="btn btn-primary" to="/about">About</nuxt-link>
Hope its help.
Related
I have this component:
<template>
<div class="hello">
<div>
My prop: {{ myprop }}?
</div>
<div>
<button class="fas fa-lock-open lock" #click="changeText()">Click</button>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'StartPage',
props: {
myprop: {
type: String
}
},
model: {
prop: 'myprop',
event: 'click'
},
methods: {
changeText () {
this.$emit('click', 'sometext')
console.log('this.myprop', this.myprop)
}
}
})
</script>
Im using vue v3. Everytime I click on the button, I still see the text "My prop: ?" in the browser.
And in the console I can see: "this.myprop undefined" every time I click on the button.
What am I doing wrong?
As per my understanding, You are trying to update the prop text on click of button from the child component. If Yes, you can achieve it simply by emitting a new text and updating that in the parent component.
Live Demo :
const ShowPropText = {
template: `<div class="hello">
<div>
My prop: {{ myprop }}
</div>
<div>
<button class="fas fa-lock-open lock" #click="changeText()">Click</button>
</div>
</div>`,
props: ['myprop'],
methods: {
changeText() {
this.$emit('click-event', 'sometext')
}
}
}
const app = Vue.createApp({
components: {
'show-prop-text': ShowPropText
},
data() {
return {
text: 'This is default text'
}
},
methods: {
methodCall(e) {
this.text = e;
}
}
})
app.mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue#next"></script>
<div id="app">
<show-prop-text :myprop="text" #click-event="methodCall"></show-prop-text>
</div>
I've tried a few different things and now must ask for some help (thanks in advance).
I'm creating a simple Vue js app where a component form emits data as a object (this works) to its parent.
the parent then runs a v-for loop and passes the Object data to a component which displays the data (this does not work).
Vue Version
($ vue --version
#vue/cli 4.4.1)
Parent code:
<template>
<div class="MEDS">
<goalForm #goal_data="goal_create($event)"/>
<section>
<div v-for="(goalItem, index) in this.goals_list_container" v-bind:key="index">
<goalItem :goal="goalItem"/>
</div>
</section>
</div>
</template>
// # is an alias to /src
import goalForm from '#/components/Goal_form.vue'
import goalItem from '#/components/Goal_item.vue'
export default {
name: 'MEDS',
components: {
goalForm,
goalItem
},
data(){
return{
// Recievs goals from goalForm on submit, this is an array of objects
goals_list_container: [],
}
},
methods: {
goal_create(payload){
this.goals_list_container.push(payload);
console.log(this.goals_list_container)
}
}
}
GOAL ITEM (that should display the goal)
<template>
<div>
<h3>{{goal.title}}</h3>
</div>
</template>
export default {
prop: ['goal'],
data(){
return {
goal: {}
}
},
watch: {
}
}
Goal_form: (EDITED)
<div>
<form action="" class="goalForm" #submit.prevent="emit_Goal">
<input type="text" name="title" id="title" v-model="title">
<input type="text" name="description" id="description" v-model="des">
<input type="date" name="dueDate" id="dueDate" v-model="dueDate">
<input type="number" name="priority" id="priority" v-model="priority">
<input type="submit" class="submit">
</form>
</div>
</template>
<script>
export default {
data() {
return {
title: null,
des: null,
dueDate: null,
priority: null,
goal_data: {}
}
},
methods: {
push_goal(){
this.goal_data.title = this.title
this.goal_data.des = this.des
this.goal_data.dueDate = this.dueDate
this.goal_data.priority = this.priority
},
emit_Goal(){
// Move goal details into Object to be Emited
this.push_goal()
// Emit the form to the parent on submit
this.$emit('goal_data', this.goal_data)
}
}
}
</script>
<style lang="scss" scoped>
form {
display: flex;
flex-direction: column;
input {
&[name="title"]{
}
}
}
</style>
The for loop seems to work as each submit of the Goal_form creates a new instance of the Goal_item component.... But it does not populate with any data.
I Am either getting this totally wrong or have missed something small but any help would be greatly appreciated -
W
How can I i update the counters separatly inside v-for? Now it updates both when incrementing, since the list can be dynamic i cant set variables for all the types.
The code i run inside the v-for is:
<a #click.prevent="decrease(quote, min)">
Decrease
</a>
<input name="types" type="text" v-model="quote" >
<a #click.prevent="increase(quote, max)">
Increase
</a>
It looks like:
And here is the vue script:
<script>
var app = new Vue({
el: "#contents",
data: {
quote: 1,
},
computed: {
},
methods: {
decrease: function(quote, min){
app.quote--;
if(app.quote < min){
app.quote = min;
}
},
increase: function(quote, max){
if(app.quote > max){
app.quote = max;
}
},
},
});
</script>
You should do something like this:
<template>
<div>
<div v-for="item in d" :key="item">
<Counter></Counter>
</div>
</div>
</template>
<script>
import Counter from "./Counter.vue";
export default {
name: "HelloWorld",
components: { Counter },
props: {
msg: String
},
data: () => {
return {
d: [1, 2]
};
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
/// counter component with its own state
<template>
<div>
<div>
<span>{{count}}</span>
<button v-on:click="increment">increment</button>
<button v-on:click="decrement">decrement</button>
</div>
</div>
</template>
<script>
export default {
name: "Counter",
data: () => {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
demo: https://codesandbox.io/s/silly-solomon-0hk16?file=/src/components/Counter.vue:0-516
The idea is that you should put the logic inside each component, but in your case you set just one state ant try to share it for many instance, instead you should create a reusable component with its own state, like in my case : count
After googling for hours and trying all king examples I still can't figure out how to call to a function that located in a child or pass any data to a child from the parent. I tried so many examples without success and i got really confused with the Vue, is it so complicated to pass a data to a child? Here is what I came up with from one of the examples but it does not work with me, maybe I do something wrong here? Thanks :(
parent.vue
<template>
export default {
name:'parent'
data:{
retrun:{
dataTochild:''
}
},
methods:{
callToChild:function(){
this.dataTochild = 'Hello Child'
}
}
}
</template>
<child :myprop="dataTochild" />
<input #click="this.callToChild" />
child.vue
<template>
export default {
name:'child',
props:['myprop'],
watch:{
myprop:function(){
alert('Hello Parent')
}
}
}
<template>
By the way, I am using Vue 2 version!
you have a spelling error on return (retrun), and there could be other errors on code you have omitted.
Working live demo
Here it is working on a live demo
Code
Parent
<template>
<div class="parent">
<child :myprop="dataTochild" />
<button #click="callToChild">Press me!</button>
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
name: "Parent",
data() {
return {
dataTochild: "",
counter: 0
};
},
methods: {
callToChild: function() {
this.counter = this.counter + 1;
this.dataTochild = "Hello Child " + this.counter;
}
},
components: {
Child
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
width: 200px;
height: 60px;
}
</style>
Child
<template>
<div class="child">
<p>{{ myprop }}</p>
</div>
</template>
<script>
export default {
name: "Child",
props: ["myprop"],
watch: {
myprop: function() {
console.log("Hello Parent");
alert("Hello Parent");
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div.child {
width: 400px;
height: 100px;
margin: auto;
}
</style>
The mouseover action cannot work; it cannot console.log the message when I mouseover
code
<template>
<div id="horrizontalNav">
<el-menu class="el-menu-demo" mode="horizontal" >
<el-menu-item index="1" #mouseover="showUp">find Music</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
showUp() {
console.log('succeed')
}
},
}
</script>
Since you are putting the event on a custom element, you have to use the native modifier:
<el-menu-item index="1" #mouseover.native="showUp">find Music</el-menu-item>
see more here: https://v2.vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components