Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
solving layout changes in Vue.js
<template>
<ul class="language-selector">
<li
v-for="(language, idx) in $i18n.availableLocales"
:class="{selected: language === $i18n.locale}"
>
<a @click="changeLayout(language, $t(`languages.list[${idx}].bidi`))>
<Flag
:country="$t(`languages.list[${idx}].country-code`)"
:title="language"
:class="{clickable: language !== $i18n.locale}"
/>
</a>
</li>
</ul>
</template>
<script>
import Flag from "../componenets/languages/flags.vue";
export default {
methods: {
changeLayout(language, isBidi) {
if (language === this.$i18n.locale) {
return;
}
let newLayout = "";
if (isBidi === "rtl") {
newLayout = "/css/bidi-layout.css";
}
document.getElementById("bidi") = newLayout;
this.$i18n.locale = language;
this.$emit("new-language", language);
}
},
componenets: {
Flag
}
}
</script>
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic">
<link rel="stylesheet" href="<%= BASE_URL %>css/main-layout.css">
<link rel="stylesheet" href="<%= BASE_URL %>css/additional-fonts.css">
<link rel="stylesheet" id="bidi" href="">
</head>
<body class="layout">
</body>
<section id="app">
</section>
<!-- built files will be auto injected -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.