Расширение рабочего переключателя Vue (переключение между 0 и 1) с помощью REST - PullRequest
0 голосов
/ 22 января 2019

Я не очень знаком с js и vue - вопрос новичка.Может быть, кто-то хотел бы помочь мне решить проблему.

мой вопрос

Как я могу перенести изменения любого переключателя (toggle-btn) в Django (-rest) - аналогично этому. $ http.post ('/ api / tree / $ { tree-id }', ...?) ...? ".Идентификатор дерева (определяется Джанго), например: / tree / 805114 /

Вывод html Django

...
<head>
  <link type="text/css" rel="stylesheet" href="vue/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="vue/css/bootstrap-vue.css" />
  <script src=vue/js/vue.js ></script>
  <script src=vue/js/polyfill.min.js ></script>
  <script src=vue/js/bootstrap-vue.js ></script>
</head><body>
<div id="app">
<ul><li>
<a href="/tree/805114/"><b>805114</b> &lt;48.11478.0&gt;</a>
  <toggle-btn initial='0'> </toggle-btn>
  <ul><li>
       <a href="/tree/825386/"><b>825386</b> &lt;44.33508.0&gt;</a>
       <toggle-btn initial='0'> </toggle-btn>
    </li>
    <li>
       <a href="/tree/814216/"><b>814216</b> &lt;8.1181615.0&gt;</a>
       <toggle-btn initial='0'> </toggle-btn>
       <ul><li>
         <a href="/tree/814215/"><b>814215</b> &lt;32.1181615.0&gt;</a>
         <toggle-btn initial='0'> </toggle-btn>
       </li></ul>
  </li></ul>
</li></ul>
</div>
<script src=js/simplebutton.vue ></script>
</body>
...

my Vue script - заимствовано и щелкнуто вместе; -)

  • файл: js / simplebutton.vue
const ToggleStatus = ('toggle-btn', {
  data: function() {
    return {
      currenValue: this.initial
    }
  },
  props: {
    initial: {
      type: String,
      required: false,
      default: '0'
    }
  },
  methods: {
    set_value: function () {
      if (this.currenValue !=1) {
        this.currenValue = 1;
      } else {
        this.currenValue = 0;
      }
    }
  },
  template: '<button v-on:click="set_value">{{ currenValue }}</button>'
});

const my = new Vue ({
  el: "#app",
  components: { 'toggle-btn': ToggleStatus },
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...