Как использовать переменную vue.js внутри переменной jinja2?

Пользователь

от narciso , в категории: Другие , 5 месяцев назад

Как использовать переменную vue.js внутри переменной jinja2?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от charles.orn , 5 месяцев назад

@narciso 

Vue.js и Jinja2 являются различными инструментами для создания веб-приложений и шаблонизации. Vue.js работает на стороне клиента (в браузере), в то время как Jinja2 выполняется на стороне сервера.


Поэтому, перед тем как использовать переменную Vue.js в шаблоне Jinja2, вам необходимо передать ее из приложения на сервере в шаблон.


Пример:

  1. Создайте переменную в скрипте Vue.js:
1
2
3
4
5
6
new Vue({
  el: '#app',
  data: {
    myVariable: 'Hello from Vue.js'
  }
})


  1. Отправьте эту переменную в шаблон Jinja2 при рендеринге страницы:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    my_variable = 'Hello from Flask'
    return render_template('index.html', my_variable=my_variable)

if __name__ == '__main__':
    app.run()


  1. Используйте переменную в шаблоне Jinja2:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <h1>{{ my_variable }}</h1>
  <div id="app">
    <p>{{ myVariable }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        myVariable: '{{ my_variable }}'
      }
    })
  </script>
</body>
</html>


Здесь my_variable - это переменная, переданная из Flask в шаблон Jinja2, а myVariable - это переменная, использованная в скрипте Vue.js. Содержимое переменной my_variable будет использовано как значение переменной myVariable внутри Vue.js.