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>

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>

Boolean data seems acting weirdly in vue's reactivity in vue 3

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

Why does javascript assume that a function is a variable?

Well, I just noticed that JS somehow takes a function as a variable in my code. Here is it:
<template>
<div id="">
<div>
<input type="text" v-model="value">
<button v-on:click='[factorial(), show=!show]'>Factorial</button>
<span v-show="show">{{value}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
value : 0,
show: false
}
},
methods: {
},
computed: {
factorial(x=this.value){
if (!x){return 1}
else {return x*factorial(x-1)}
}
},
mounted() {}
}
</script>
<style lang="scss">
</style>
The error is ReferenceError: Can't find variable: factorial.
What am I doing wrong?

You cannot pass arguments to computed properties, that is what methods are for.
You also need to use this when calling the function.
methods: {
factorial(x) {
if (!x) {
x = this.value;
}
return x * this.factorial(x-1);
},
},

You mustn't use factorial() as a computed function. You should instead make it a method:
<template>
<div id="">
<div>
<input type="text" v-model="value">
<button v-on:click='[factorial(), show=!show]'>Factorial</button>
<span v-show="show">{{value}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
value : 0,
show: false
}
},
methods: {
factorial(x=this.value){
if (!x){return 1}
else {return x * this.factorial(x-1)}
}
},
}
</script>
Here is a working sandbox for you:
https://codesandbox.io/s/lingering-voice-p6d9l

V-Html with Updated doesn’t work

I m trying to make a game.
When a player submit to the game, normally the welcome message appears ! But Nothing appears.
<template>
<div>
<span v-html = "welcomeMessage" v-hide></span>
<form v-hide v-on:submit.prevent="setPlayer">
<input name="player" placeholder="Enter the player name" v-border:blue/>
<button type="submit" v-border:red>Play</button>
</form>
</div>
</template>
<script>
export default {
name: 'player',
data: function () {
return {
player: '',
welcomeMessage: ''
}
},
updated: function () {
this.welcomeMessage = `Hi <span class="player">${this.player}</span> ! `
},
methods: {
setPlayer: function (event) {
this.player = event.target[0].value
}
},
directives: {
border: function (el, binding) {
el.style.borderColor = binding.arg
},
hide: function (el, binding, vnode) {
let isForm = vnode.tag === 'form'
let player = vnode.context.player
if (isForm) {
el.style.display = player ? 'none' : 'block'
} else {
el.style.display = player ? 'block' : 'none'
}
}
}
}
</script>
<style scoped>
</style>
it seems that doesn't work, i don't know why ! the name of theplayer is updated in the hook updated but the template doesn't show it.
Any clue.
Thxs.

Use v-model to bind input to data, this create a two binding on inputs. This can reduce a couple to code lines.
<template>
<div>
// show message only if new player created
<span v-html="welcomeMessage" v-show="playerCreated"></span>
<form v-on:submit.prevent="setPlayer" v-if="!playerCreated">
<input name="player" v-model="player" placeholder="Enter the player name" v-border:blue/> // bind input to `player` data property.
<button type="submit" v-border:red>Play</button>
</form>
</div>
</template>
In the component logic:
data: function () {
return {
player: '',
playerCreated: false,
welcomeMessage: ''
}
},
methods: {
setPlayer: function () {
this.playerCreated = true;
this.welcomeMessage = `Hi <span class="player">${this.player}</span> !`
}
},

You can use this, its worked for me in modal, when loading data to body
JSFiddle
<template id="some-template">
<div class="header">
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
</template>
<div id="app">
<some>
<div slot="header" v-html="rawHtmlheader"></div>
<div slot="body" v-html="rawHtmlbody"></div>
<div slot="footer" v-html="rawHtmlfooter"></div>
</some>
</div>
JS logic
Vue.component('some', {
template: '#some-template'
})
new Vue({
el: '#app',
data: {
rawHtmlheader: '<p style="color:red">RED HEADER</p>',
rawHtmlbody: '<p style="color:green">GREEN TEXT</p>',
rawHtmlfooter: '<p style="color:brown">BROWN FOOTER</p>',
}
})