通过REST扩展有效的Vue开关（在0和1之间切换）

时间：2019-01-22 17:48:10

标签： javascript ajax vue.js django-rest-framework

我对js和vue不太熟悉-一个初学者的问题。也许有人想帮助我解决问题。

我的问题

如何将任何开关（toggle-btn）的更改转移到Django（-rest）-类似于“ this。$ http.post（'/ api / tree / $ { tree-id }'，...？）...？“。 tree-id（由Django确定）例如：/ tree / 805114 /

Django html输出

...
<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>
...

我的Vue脚本-一起单击并单击;-）

文件：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 },
});

0 个答案:

没有答案