Динамическое определение направления страницы - Vue Js - PullRequest
Новая
       2

Динамическое определение направления страницы - Vue Js

0 голосов
/ 20 июня 2019

Я пытаюсь динамически установить направление страницы (RTL или LTR) в моем проекте Vue js.

Однако, если я пытаюсь установить динамически, например, с помощью переменной, называемой direction, ничего не происходит (оно сохраняет стандартное значение, значение LTR): 

  <html lang="en" v-bind:dir="direction" id="example-1">
    <head>
     <title>Page Title</title>
    </head>
    <body>
      <div>
        <p>Write this text right-to-left!</p>          
      </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"> 
   </script>
   <script src="test.js"></script>
   </body>
 </html>

var test=new Vue({
el: '#example-1',
data: {
    counter: 0,       
    direction:'rtl'
  },
  methods: {
    greet: function (event) {
        this.direction='rtl';
    }
}
});

Показывает следующую ошибку, [Vue warn]: не монтируйте Vue на или - монтируйте вместо обычных элементов. Как я могу это сделать?

1 Ответ

1 голос
/ 20 июня 2019

Попробуйте установить в div вместо html элемента.И использовать CSS direction

  <html lang="en">
    <head>
     <title>Page Title</title>
    </head>
    <body>
      <div v-bind:style="{direction}" id="example-1">
        <p>Write this text right-to-left!</p>          
      </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"> 
   </script>
   <script src="test.js"></script>
   </body>
 </html>
...