Mehedi Hasan's BLog

Wednesday, June 30, 2021

Add more div in vue js and jquery

IN VUE JS
var demo = new Vue({

  el: '#demo',
  data: {
    counter: 0,
    inputs: [{
      id: 'fruit0',
      label: 'Enter Fruit Name',
      value: '',
    }],
  },
  methods: {
    addInput() {
      this.inputs.push({
        id: `fruit${++this.counter}`,
        label: 'Enter Fruit Name',
        value: '',
      });
    }
  }
});

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="demo">
  <div class="inputArea" v-for="input in inputs" :key="input.id">
    <label :for="input.id">{{input.label}}</label>
    <input :id="input.id" v-model="input.value"></input>
  </div>
  <button @click="addInput">Add input</button>
</div>

IN Jquery

<html lang="en">
<head>
  <title>Bootstrap Jquery Add More Field Example</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Bootstrap Jquery Add More Field Example</div>
    <div class="panel-body">

        <form action="action.php" >

      	<div class="input-group control-group after-add-more">
          <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
          <div class="input-group-btn"> 
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
          </div>
        </div>

        </form>

        <!-- Copy Fields -->
        <div class="copy hide">
          <div class="control-group input-group" style="margin-top:10px">
            <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
            <div class="input-group-btn"> 
              <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
            </div>
          </div>
        </div>

    </div>
  </div>
</div>

<script type="text/javascript">

    $(document).ready(function() {

      $(".add-more").click(function(){ 
          var html = $(".copy").html();
          $(".after-add-more").after(html);
      });

      $("body").on("click",".remove",function(){ 
          $(this).parents(".control-group").remove();
      });

    });

</script>

</body>
</html>

Thursday, May 20, 2021

Call a child component method from a parent in vuejs

Answer # 1

For small things, you can also call child component methods with $refs likethis. $refs.foo.bar ().
However, direct data reference between components is not recommended.

Component-Vue.js

However, it is also very important to keep the parent and child as separated as possible through a well-defined interface. This ensures that the code for each component is written and judged relatively independently. Therefore, components can be made more maintainable and potentially reusable

So basically

$emit from child to parent

Parent to child props

It may be good to pass data with

However, props cannot directly call child component methods.
Therefore, there is a way to use EventBus as shown below to coordinate processing between components.

Communication other than parent-child

var EventBus = new Vue ()
Object.defineProperties (Vue.prototype, {
    $bus: {
        get () {
            return EventBus
        }
    }
}
let ComponentY = Vue.extend ({
  mounted () {
    this. $bus. $on ('onMountedX', () =>{
        console.log ('onMountedX')
    })
  }
})
let ComponentX = Vue.extend ({
  mounted () {
    this. $bus. $emit ('onMountedX')
  }
  components: [ComponentY]
})

Answer # 2

Looks good with ref

Use vuex for more complex

Answer # 3

If you allow child components to be referenced with the ref attribute, you can call child methods from the parent
The following is a sample program.
The test method of the parent component App.vue calls the method of the child component Test.vue using $refs.

App.vue

<template>
  <div id = "app">
    <test ref = "test"></test>
    <button @ click = "test">test</button>
  </div>
</template>
<script>
import Test from "./Test.vue"
export default {
  methods: {
    test () {
      console.log ("parentMethod")
      this. $refs.test.childMethod ()
    },
  },
  components: {Test}
}
</script>

Wednesday, May 19, 2021

Execution sequence of Group By, Having and Where clause in SQL Server?

FROM & JOINs determine & filter rows

WHERE more filters on the rows
GROUP BY combines those rows into groups
HAVING filters groups
ORDER BY arranges the remaining rows/groups
LIMIT filters on the remaining rows/groups