vue render html raw
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
vue render html raw
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
vue on page link or anchor
// scroll to element using quasar library
// uses example; scrollToElement(this.$route.hash)
// uses example; scrollToElement('#cafe-menu')
import { scroll } from 'quasar'
const { getScrollTarget, setScrollPosition } = scroll
scrollToElement (id) {
if (id && id !== '') {
let el = document.querySelector(id)
if (el) {
const target = getScrollTarget(el)
const offset = el.offsetTop
const duration = 1000
setScrollPosition(target, offset, duration)
}
}
},
v-bind Shorthand
<!-- full syntax -->
<a v-bind:href="url"> ... </a>
<!-- shorthand -->
<a :href="url"> ... </a>
<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>
vue on page link or anchor
//P.S. the code is written for Vue 2.
//You will have to adjust it to Vue 1.
//Your view:
// <a class="porto-button" @click="scrollMeTo('porto')">Porto, Portugal</a>
// ...
// <div ref="porto" class="fl-porto"> </div>
//Your code:
methods: {
scrollMeTo(refName) {
var element = this.$refs[refName];
var top = element.offsetTop;
window.scrollTo(0, top);
}
}
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us