Передача Django данных в Vue компонент - PullRequest
Новая
       4

Передача Django данных в Vue компонент

0 голосов
/ 29 февраля 2020

Я использую Django в качестве бэкэнда и пытаюсь передать некоторые данные в созданный мной компонент таблицы Vue. Я настроил его, используя учебник Компонент хорошо отображается при использовании веб-пакета. Я пытаюсь установить данные в javascript константу, а затем передать их в компонент. Похоже, что данные не передаются. Вот как устроены мои скрипты.

index. html

{% block content %}
<script>
  const gridData = {{json_data|safe}};
  console.log(gridData)
</script>

    <div id="app">
        <table_component
        v-bind:tableData=this.gridData
        >
        </table_component>

    </div>  
{% end block %}

myComponent. vue seciton 

export default {
  name: 'table_component',
    props: {
    tableData: Array
  },
  data() {
      return {

      }
  },
  components: {
    Grid,
    ButtonModal
  },
  created(){
    console.log(this.tableData)
  },
}

Когда я смотрю на консоль, она не показывает никаких данных. Это просто говорит неопределенное.

view.py 

class CurrentClassroomView(LoginRequiredMixin, CreateView):
    template_name = 'home/index.html'

    def get(self, request, *args, **kwargs):
        db_data = list(myData.objects.all().values())
        my_json_data = json.dumps(db_data)
        return render(request, self.template_name, {'json_data':my_json_data})

Я получаю это в консоли, что я не уверен, что это значит и почему он делает все в нижнем регистре, хотя я передаю его заглавными буквами. 

[Vue tip]: Prop "griddata" is passed to component <Anonymous>, but the declared prop name is "gridData". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "grid-data" instead of "GridData".
tip @ vue.js:639
extractPropsFromVNodeData @ vue.js:2294
createComponent @ vue.js:3233
_createElement @ vue.js:3427
createElement @ vue.js:3359
vm._c @ vue.js:3496
eval @ VM1553:3
Vue._render @ vue.js:3550
updateComponent @ vue.js:4066
get @ vue.js:4477
Watcher @ vue.js:4466
mountComponent @ vue.js:4073
Vue.$mount @ vue.js:9043
Vue.$mount @ vue.js:11943
Vue._init @ vue.js:5011
Vue @ vue.js:5077
eval @ index.js:14
./assets/js/index.js @ app.js:409
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87

Любая помощь по этому вопросу будет принята с благодарностью. Я не уверен, где я иду не так

1 Ответ

0 голосов
/ 29 февраля 2020

Когда вы устанавливаете gridData и пытаетесь связать его с Vue компонентом, он не работает, потому что у них разные контексты. Когда вы имеете дело с Vue компонентами, вы можете получить доступ только к данным, определенным в экземпляре Vue. Кроме того, {{json_data|safe}} уязвим для атак типа XSS.

Тем не менее, очень легко безопасно передавать данные из Django в Vue компонент, мы просто должны использовать json_script фильтрует и загружает данные в Vue mounted hook.

В views.py просто передайте список в шаблон, не нужно использовать json.dumps(): 

class CurrentClassroomView(LoginRequiredMixin, CreateView):
    template_name = 'home/index.html'

    def get(self, request, *args, **kwargs):
        db_data = list(myData.objects.all().values())
        return render(request, self.template_name, {'json_data':db_data})

В index. html мы будем использовать тег шаблона json_script для создания отформатированного представления JSON json_data переменной: 

{% block content %}
{{ json_data|json_script:"json_data" }}

<div id="app">
    <table_component></table_component>
</div>  
{% end block %}

Это создаст <script> блок, например: 

<script id="json_data" type="application/json">{"hello": "world"}</script>

И, наконец, в myComponent. vue, мы загружаем, JSON - декодируйте и устанавливайте данные в mounted хуке: 

export default {
  data() {
      return {
          tableData
      }
  },
  components: {
    Grid,
    ButtonModal
  },
  mounted() {
    this.tableData = JSON.parse(document.getElementById('json_data').textContent)
  },
}
...