Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
solving layout changes in Vue.js
<ul class="language-selector">
v-for="(language, idx) in $i18n.availableLocales"
:class="{selected: language === $i18n.locale}"
<a @click="changeLayout(language, $t(`languages.list[${idx}].bidi`))>
:class="{clickable: language !== $i18n.locale}"
import Flag from "../componenets/languages/flags.vue";
export default {
methods: {
changeLayout(language, isBidi) {
if (language === this.$i18n.locale) {
let newLayout = "";
if (isBidi === "rtl") {
newLayout = "/css/bidi-layout.css";
document.getElementById("bidi") = newLayout;
this.$i18n.locale = language;
this.$emit("new-language", language);
componenets: {
<!doctype html>
<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="//,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="">
<body class="layout">
<section id="app">
<!-- built files will be auto injected -->
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.