學習vue過程當中遇到的問題

時間 2021-08-13

標籤 css 前端 vue git github 數據庫服務器 app 編輯器 post 欄目 CSS 简体版

原文原文鏈接

一、vue-quill-editor動態禁用

項目中把vue-quill-editor單獨封裝成了一個組件，經過props傳遞readOnly參數來設置是否禁用editor。開發中發現能夠實現禁用效果，但取決於第一次打開這個編輯器的狀態，若是第一次打開時readOnly參數爲true，那麼後面一直都是true，儘管傳入的readOnly參數不一樣。css

<editor v-model="form.noticeContent" :min-height="192" :read-only="form.status === '1'" />

經過調試發現是vue-quill-editor在頁面渲染完後只初始化一次，若是在init方法中進行設置，那麼只會設置一次。前端

根據官方文檔，能夠把動態禁用移到狀態改變事件中（onEditorFocus、text-change、selection-change、editor-change等），這樣就能夠實現動態禁用效果了。vue

二、vue裏實現路由跳轉

就是點擊按鈕，打開另外一個tab頁面，而不是頁面裏的彈窗。這在通常的前端項目裏，直接使用a標籤就能夠。git

雖然在vue裏也有相似的，即<router-link>標籤，渲染後就是a標籤。github

關於路由跳轉有不少方式，這裏我選用this.$router.push({ path: })的方式，寫上頁面路徑一直404，由於要實現路由的調整，因此要跳轉的頁面都須要加入路由列表，否則找不着。數據庫

router/index.js裏添加服務器

{
    path: '/notice',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'add',
        component: (resolve) => require(['@/views/collaboration/notice/detail'], resolve),
        name: 'NoticeDetail',
        meta: { title: '新增公告' }
      },
      {
        path: 'edit/:noticeId(\\d+)',
        component: (resolve) => require(['@/views/collaboration/notice/detail'], resolve),
        name: 'NoticeDetail',
        meta: { title: '修改公告' }
      }
    ]
  }

這樣你要跳轉到新增頁面或者修改頁面，就能夠像下面這樣寫app

/** 新增按鈕操做 */
      handleAdd() {
        this.$router.push({ path: '/notice/add' })
      },
      /** 修改按鈕操做 */
      handleUpdate(row) {
        const noticeId = row.noticeId || this.ids[0]
        this.$router.push({ path: '/notice/edit/' + noticeId })
      }

三、莫名其妙的錯誤

vue的熱更新有時候真的不能相信，你的代碼或許真的沒問題，你只是須要重啓讓它冷靜一下。編輯器

四、el-button的@click方法點擊失效

下面的代碼，點擊按鈕，兩個都打印了，但卻沒有執行submitNotice方法post

/** 發佈按鈕操做 */
      handleSubmit() {
        if (this.noticeId === undefined) {
          this.msgError("發佈失敗")
          return
        }
        this.$confirm('是否確認發佈該公告?', "警告", {
          confirmButtonText: "肯定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          console.log('11111')
          return submitNotice(this.noticeId)
        }).then(() => {
          this.msgSuccess("發佈成功")
          this.getDetails(this.noticeId)
        }).catch(() => {});
      },

下面這樣修改就能夠了。。

這倆寫法貌似沒啥區別啊。。經過查資料，我估計就是這個this的問題。this的做用域不一樣

參考：http://www.javashuo.com/article/p-qvnzzbtk-hc.html

五、父組件傳入子組件的值更新，子組件不會從新渲染

父組件調用子組件，傳入deptId，當deptId更新時，子組件不會從新加載

<post :deptId="form.deptId" />

子組件接受值

props: {
    deptId: {
      type: Number,
      default: -1
    }
  },

須要在watch中監聽子組件參數變化，而後執行須要的邏輯

watch: {
    deptId: {
      handler: function (val, oldVal) {
        this.inputDeptId = val
        if (val !== -1) {
          this.getList();
        }
      },
      deep: true
    }
  },

參考：http://www.cxyzjd.com/article/zhengyinling/93485296