I can't seem to get the library hashids to work with vue.js
The preferend method of how i want to work with it is:
<template>
<div class="container">
{{ hashids.encode('1') }}
</div>
</template>
<script>
const Hashids = require("hashids")
export default {
data () {
return {
Hashids: Hashids,
}
},
}
</script>
Try to initialize the Hashid in mounted hook like :
<template>
<div class="container">
{{ Hashids.encode('1') }}
</div>
</template>
<script>
const Hashids = require("hashids")
export default {
data() {
return {
Hashids: null,
}
},
mounted() {
this.Hashids = new Hashids.default()
}
}
</script>
This made it work!
Related
I am struggling to update the interpolation of thing.
This simple function should change the value of the data but instead does nothing.
Chrome logs the change of thing in the console but the HTML does not update.
<template>
<div class="container-xl pb-5">
<button class="mb-2 btn-lg selected-dropdown" #click="dropSelect('B')">
{{ thing }}
</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
thing: "A",
};
},
methods: {
dropSelect(thing: any) {
console.log(thing);
return this.thing;
},
},
});
</script>
Try to update your data property instead of returning:
dropSelect(thing: any) {
this.thing = thing
},
One small observation : Use this.thing = thing instead of return this.thing
Demo :
new Vue({
el: '#app',
data: {
thing: "A"
},
methods: {
dropSelect(thing) {
this.thing = thing;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button #click="dropSelect('B')">
{{ thing }}
</button>
</div>
is it possible to data bind a function in Vue?
In the template I have something like: <title> {{nameofFunction()}}</title>
When I run it, it just says native function on the page.
Thanks.
There is also such thing as "computed property" in Vue, designed to do exactly this:
<template>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<script>
export default {
data:() => ({
message: 'Hello'
}),
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
}
</script>
yes you can. Could you share how are you defining your data options?
Here I have an example that works both in Vue2 and Vue3
<template>
<div id="app">
<h1>{{messageHelloFn()}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
messageHelloFn: (name = 'Lucas') => {
return `Hello ${name}`
}
};
}
};
</script>
Live example: https://codepen.io/LucasFer/pen/abywRMW
a.js
const func = (str) => str
export default fn
<template>
<div id="app">
<div v-for="item in items">
{{ getTime(item) }}
</div>
<div>
{{ fn('a') }}
</div>
<div>
{{ func('b') }}
</div>
</div>
</template>
<script>
import func from './a.js'
export default {
data () {
return {
items: ['123123', '456456'],
fn: (str) => str
}
},
methods: {
getTime (v) {
return v + '123'
}
}
};
</script>
I'm trying to change a variable that has a data type 'boolean'. When the page is first loaded, the data works well. However, when the page is reloaded, the variable is updated locally in the method, but not in the global data section. Therefore in the console, I keep receiving an error "Uncaught (in promise) TypeError: Cannot read property 'value' of undefined at invokeDirectiveHook"
Is there something I've missed?
<template>
<p>Value: {{ val }}</p>
<button #click="changeMe">Click Me</button>
</template>
<script>
import { ref } from 'vue';
export default {
data() {
return {
val: ref(false);
},
},
methods: {
changeMe() {
this.val = !this.val;
}
}
}
</script>
please don't mix the options API with the composition API
Options API
Vue.createApp({
data() {
return {
val: false
}
},
methods: {
changeMe() {
this.val = !this.val
}
}
}).mount('#demo')
<script src="https://unpkg.com/vue#next"></script>
<div id="demo" class="demo">
<p>Value: {{ val }}</p>
<button #click="changeMe">Click Me</button>
</div>
Composition API
const { createApp, ref } = Vue;
const app = createApp({
setup() {
let val = ref(false)
function changeMe() {
val.value = !val.value
}
return {
val,
changeMe
}
}
});
app.mount("#app");
<script src="https://unpkg.com/vue#next"></script>
<div id="app">
<p>Value: {{ val }}</p>
<button #click="changeMe">Click Me</button>
</div>
Compositions API (short)
// Composition API
<template>
<p>Value: {{ val }}</p>
<button #click="changeMe">Click Me</button>
</template>
<script setup>
import { ref } from 'vue'
const val = ref(false)
function changeMe() {
val.value = !val.value
}
</script>
the <script setup> is now included in the 3.2 version
I have got it now where I can render the entire array in a random order, just cant render one element of the array. I am also having an issue in showing the entire json object instead of just the text of the quote.
here is the html:
<template>
<div>
<button v-on:click="getTeacupData">Get Teacup Data</button>
<!-- <div>{{ teacupDataList }}</div> -->
<div
v-for="teacupData in teacupDataList"
:key="teacupData.quote"
class="teacup-data"
>
<div>
<span class="quote">
{{
teacupDataList[Math.floor(Math.random() * teacupData.quote.length)]
}}</span
>
</div>
</div>
</div>
</template>
and here is the script:
<script>
import axios from 'axios'
export default {
name: 'Teacup',
data() {
return {
teacupDataList: []
}
},
methods: {
getTeacupData() {
axios.get('/teacupProph.json').then((response) => {
this.teacupDataList = response.data
})
}
}
}
</script>
Add a computed property called randomQuote as follows :
<script>
import axios from 'axios'
export default {
name: 'Teacup',
data() {
return {
teacupDataList: []
}
},
computed:{
randomQuote(){
const rand=Math.floor(Math.random() * this.teacupDataList.length)
return this.teacupDataList[rand]?this.teacupDataList[rand].quote:""
}
},
methods: {
getTeacupData() {
axios.get('/teacupProph.json').then((response) => {
this.teacupDataList = response.data
})
}
}
}
</script>
in template don't use v-for loop just call the computed property :
<template>
<div>
<button v-on:click="getTeacupData">Get Teacup Data</button>
<!-- <div>{{ teacupDataList }}</div> -->
<div>
<span class="quote">
{{
randomQuote
}}</span>
</div>
</div>
</template>
Edit
place your json file inside the components folder and call it like axios('./teacupProph.json') and fix the #:click to #click, check this code
How I can get access to parent's data variable (limitByNumber) in my child component Post?
I tried to use prop but it doesn't work.
Parent:
import Post from './components/Post.vue';
new Vue ({
el: 'body',
components: { Post },
data: {
limitByNumber: 4
}
});
Component Post:
<template>
<div class="Post" v-for="post in list | limitBy limitByNumber">
<!-- Blog Post -->
....
</div>
</template>
<!-- script -->
<script>
export default {
props: ['list', 'limitByNumber'],
created() {
this.list = JSON.parse(this.list);
}
}
</script>
Option 1
Use this.$parent.limitByNumber from child component. So your Component template would be like this
<template>
<div class="Post" v-for="post in list | limitBy this.$parent.limitByNumber" />
</template>
Option 2
If you want to use props, you can also achieve what you want. Like this.
Parent
<template>
<post :limit="limitByNumber" />
</template>
<script>
export default {
data () {
return {
limitByNumber: 4
}
}
}
</script>
Child Pots
<template>
<div class="Post" v-for="post in list | limitBy limit">
<!-- Blog Post -->
....
</div>
</template>
<script>
export default {
props: ['list', 'limit'],
created() {
this.list = JSON.parse(this.list);
}
}
</script>
If you want to access some specific parent, you can name all components like this:
export default {
name: 'LayoutDefault'
And then add some function (maybe like vue.prototype or Mixin if you need it in all your components). Something like this should do it:
getParent(name) {
let p = this.$parent;
while(typeof p !== 'undefined') {
if (p.$options.name == name) {
return p;
} else {
p = p.$parent;
}
}
return false;
}
and usage could be like this:
this.getParent('LayoutDefault').myVariableOrMethod