Alexander's questions

例如，如果你转到分页的第 3 页，然后在浏览器中点击返回，route.query.page 发生了变化，但内容没有改变，如果你只是点击分页，那么一切都很好， url和内容发生变化，点击浏览器后退按钮时如何跟踪url和更改内容？像这样的 url：http://localhost:3000/category/610?page=3 例如，当：-> ?page=3 等于 pageNum 时会发生什么变化

<div class="page"
                 v-if="filteredProducts.length > 20"
                 v-for="page in pages"
                 :key="page"
                 :class="{'page__selected' : page === pageNum}"
                 @click="pageClick(page)">
                {{ page }}
            </div>
data() {
    return {
      view: true,
      productsPerPage: 20,
      pageNum: 1,
}}
computed:{
paginatedProducts() {
      let from = (this.pageNum - 1) * this.productsPerPage,
        to = from + this.productsPerPage;
      return this.filteredProducts.slice(from, to);
    },
}
methods:{
pageClick(page) {
      this.$router.push({
        query: {
          ...this.$route.query,
          page: page,
        },
      })
      this.pageNum = page;
    },}

我需要帮助，我正在制作一个包含类别（主要类别有 parent_id：0）和子类别的菜单，我正在显示主要类别，但我不明白如何显示其 parent_id 类似于主要类别的子类别，我通过 vuex 从 api 获取数据

例如主类别：id：323，parent_id：0，

子类别：id：13，parent_id：323，

   <ul class="menu-list">
      <li class="menu-item" v-for="category in CATEGORIES" v-if="category.parent_id === 0">
        <button class="menu-button">{{ category.title}}</button>

        <ul class="menu-sub-list">
          <li class="menu-item" >
            <button class="menu-button">{{ }}</button>
          </li>
        </ul>

      </li>
    </ul>

Vuex

import axios, * as others from 'axios'
export const state = () => ({
  categories: []
});
export const mutations = {
  SET_CATEGORIES_TO_STATE:(state, categories) => {
    state.categories = categories
  }
};
export const actions = {
  GET_CATEGORIES_FROM_API({commit}) {
    return axios('https://exmple.com/',{
      method: "GET"
    })
      .then((categories) => {
        commit('SET_CATEGORIES_TO_STATE', categories.data);
        return categories;
      })
      .catch((error) => {
        console.log("error")
        return error;
      })
  }
};
export const getters = {
  CATEGORIES(state){
    return state.categories;
  }
};

这个表单中有一个模态窗口（网站上有很多表单）

`$('.btn-evacuator').on('click', function(e){
        e.preventDefault();
        $('.form-container').removeClass('hidden').html('<div class="form-block">\n' +
            '        <h3>Вызвать </h3>\n' +
            '        <form class="ajax-form>\n' +
            '            <input type="hidden" name="whatform" value="Форма - Вызов" />\n' +
            '            <input id="name" name="name" type="text" placeholder="Ваше имя" size="25" required="">\n' +
            '            <input id="phone" name="phone" type="tel" placeholder="Ваш телефон" required="">\n' +
            '            <button id="send" class="button cta_b" type="button">Отправить</button>\n' +
            '        </form>\n' +
            '        <button type="button" class="btn-close">×</button>\n' +
            '    </div>');
        $('body').toggleClass('lock');
    });`

форма отправлялась просто в php и потом на страницу благодарности, теперь хочу отправлять через ajax и что-то никакой реакции на кнопку



$("#send").on('click', function () {
     $.ajax({
        url: "/mail.php",
        type: 'post',
        cache: false,
        data: $(this).serialize(),
        success: function (response) {
            alert("ok")
        }
     });
     });

有一个作为单独组件的订单，我在页面上使用了 2 次或更多，它有复选框。如果我点击label它并且在组件的另一个实例中，它也会被点击，如果我点击输入本身，那么一切都很好。我想制作一个自定义复选框，其中input隐藏它，您只需单击label，但它不适用于它。如何解决问题？

<template>
<form action="" @submit.prevent="formSubmit" class="order-form">
    <h2>Начать работу</h2>
    <div class="order-content">
        <div class="order-left">
            <div class="order__row">
                <label class="down" :for="'order_name_' + makeHash">Имя</label>
                <input :id="'order_name_' + makeHash" type="text" :name="'order_name_' + makeHash" v-model="orderName" required="required" maxlength="50">
            </div>
            <div class="order__row">
                <label class="down" :for="'order_tel_' + makeHash">Номер телефона</label>
                <input :id="'order_tel_' + makeHash" type="tel" :name="'order_tel_' + makeHash" v-model="orderTel" required="required" maxlength="15">
            </div>
            <div class="order__row">
                <label class="down" :for="'order_email_' + makeHash">Email</label>
                <input :id="'order_email_' + makeHash" type="email" :name="'order_email_' + makeHash" v-model="orderEmail" maxlength="40">
            </div>
        </div>
        <div class="order-center">

        </div>
        <div class="order-right">
            <div class="order-right-pick">
                Выберите услугу:
            </div>
            <ul class="">
                <li v-for="(feature, index) in features">
                    <input type="checkbox"
                           :value="feature"
                           :id="'cb-feature-'+index"
                           v-model="selection.features">
                    <label :for="'cb-feature-'+index">{{feature}}</label>
                </li>
            </ul>
        </div>
    </div>
    <div class="order__footer">
        <div class="border-btn-box pointer-large">
            <div class="border-btn-inner">
                <button :submit="true" class="border-btn" data-text="Отправить">Отправить</button>
            </div>
        </div>
    </div>
</form>

代码

import DOMPurify from 'dompurify';
import MaskedInput from 'vue-masked-input';
import swal from 'sweetalert';
import axios from 'axios';

export default {
    name: 'order',
    components: {
        MaskedInput
    },
    data: function(){
        return {
            orderName: '',
            orderEmail: '',
            orderTel: '',
            errs: [],
            token: '',
            chatId: '',

            features: ["Reactivity", "Encapsulation", "Data Binding"],
            selection: {
                features: []
            },
        };
    },
    methods: {
        formSubmit: function(){
            let name = this.orderNameCleaned;
            let tel = this.orderTelCleaned;
            let email = this.orderEmailCleaned;

            if(name.length > 0){
                this.removeError('name');
            } else {
                this.addError('name');
            }


            if(tel.length > 0){
                this.removeError('tel');
            } else {
                this.addError('tel');
            }

            if(this.checkErrors()){
                let msg =   '<b>Новая заявка от ' + name + '!</b>\n';
                msg +=  'Номер телефона: ' + tel + '.\n';
                msg +=  'Email: ' + email + '.\n';
                this.sendMsg(msg);

            } else {
                let msg = "";
                Array.prototype.forEach.call(this.errs, function(err){
                    if(err == 'name'){
                        msg += 'Поле имя не должно быть пустое. ';
                    }
                    if(err == 'tel'){
                        msg += 'Поле телефон не должно быть пустое. ';
                    }
                });
                this.showErrorAlert(msg);
            }
        },
        sanitize: function(s){
            return DOMPurify.sanitize(s).trim().replace(/\s+/g,' ').replace(/_/g, '');
        },
        checkError: function(err){
            return this.errs.indexOf(err);
        },
        addError: function(err){
            if(this.checkError(err) == -1){
                this.errs.push(err);
            }
        },
        removeError: function(err){
            if(this.checkError(err) != -1){
                this.errs.splice(this.checkError(err), 1);
            }
        },
        checkErrors: function(){
            if(this.errs.length == 0){
                return true;
            } else {
                return false;
            }
        },
        showErrorAlert: function(msg){
            swal("Ошибка", msg, "error");
            console.log(msg);
        },
        showSuccessAlert: function(){
            swal("Успешно!", "Ваша заявка принята и будет рассмотрена в ближайшее время.", "success");
            this.orderName = '';
            this.orderTel = '';
            this.orderEmail = '';
        },
        sendMsg: function(msg){
            let url = 'https://api.telegram.org/bot' + this.token + '/sendMessage?chat_id=' + this.chatId + '&text=' + encodeURI(msg) + '&parse_mode=html';
            let $this = this;

            axios.get(url).then((response) => {
                let ok = response.data.ok;
                if(ok){
                    $this.showSuccessAlert();
                } else {
                    $this.showErrorAlert('Случилась какая-то ошибка. Подождите немного и повторите еще раз.');
                }
            }).catch((error) => {
                console.log(error);
                $this.showErrorAlert('Случилась какая-то ошибка. Подождите немного и повторите еще раз.');
            });
        }
    },
    computed: {
        makeHash: function(){
            let hash = "";
            let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for(let i = 0; i < 8; i++)
                hash += possible.charAt(Math.floor(Math.random() * possible.length));

            return hash;
        },
        orderNameCleaned: function(){
            return this.sanitize(this.orderName);
        },
        orderTelCleaned: function(){
            return this.sanitize(this.orderTel);
        },
        orderEmailCleaned: function(){
            return this.sanitize(this.orderEmail);
        },
    }
};

导航有绝对位置，有些页面bg是暗的，导航应该是白色的，反之亦然，无法重新排序类，如何实现，我将不胜感激index.php：

<?php 
include "includes/nav.php";
 ?>
<?php 
    if (isset ($_GET['page'])) {

        $page = $_GET["page"];
        $filename = "includes/" . $page . '.php';

        if (file_exists($filename)) {
            include $filename;
        }else{
            include 'includes/home.php';
        }

    }else{
        include 'includes/home.php';
    }
 ?>
<?php 
include "includes/footer.php";
 ?>