Develop Reference

How do you update a vue interpolation using an onclick method?

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>

Vue3 variable is assigned but never used when trying to pass props to child

Vue newbie here. I'm trying to pass some props from parent to child, but I get the "variable is assigned a value but never used".
Parent:
<template>
<TextBox :heading="heading1" :body="body1" />
</template>
<script>
import TextBox from "./components/TextBox.vue";
import { ref } from "vue";
export default {
name: "App",
components: {
TextBox,
},
setup() {
const heading1 = ref("Primo titolo");
const body1 = ref("Primo corpo del testo");
},
};
</script>
Child:
<template>
<h1>{{ heading }}</h1>
<p>{{ body }}</p>
</template>
<script>
export default {
name: 'TextBox',
props: {
heading: String,
body: String,
}
}
</script>
What am I missing? Thank you!

If you are using composition API setup function you need to return, or you can use data function from options API :
const { ref } = Vue
const app = Vue.createApp({
setup() {
const heading1 = ref("Primo titolo");
const body1 = ref("Primo corpo del testo");
return { heading1, body1 }
},
})
app.component('TextBox', {
template: `
<h1>{{ heading }}</h1>
<p>{{ body }}</p>
`,
props: {
heading: String,
body: String,
}
})
app.mount('#demo')
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<div id="demo">
<text-box :heading="heading1" :body="body1" />
</div>

Can I data bind a function in Vue js?

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>

My component template can't find value property from <script> VueJS

So for some reason my app doesn't read my value variable that was defined in data. Not sure what's going on. Npm compiles this without any errors.
Here's the fiddle with my code:
https://jsfiddle.net/invinivi/yr164pb7/
<template>
<div id="exercise">
<div>
<p>Current Value: {‌{ value }}</p>
<button #click="value += 5">Add 5</button>
<button #click="value += 1">Add 1</button>
<p>{‌{ result }}</p>
</div>
<div>
<input type="text">
<p>{‌{ value }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'Ex3',
el: '#exercise',
data: function () {
return {
value: 0
}
},
computed: {
result: function () {
return this.value == 37 ? 'done' : 'not there yet';
}
},
watch: {
result: function () {
var vm = this;
setTimeout(function () {
vm.value = 0;
}, 5000);
}
}
}
</script>
// FILE - Ex3.vue
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="app">
<Ex3/>
</div>
</template>
<script>
import Ex3 from "./components/Ex3"
export default {
name: 'App',
components: {
Ex3
}
}
</script>

The curly brackets had wrong encoding through Windows settings. After changing the settings to utf-8, everything runs fine.

Library Hashids import in vue.js not working

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!